element-plusdialogv-loading不生效问题及解决

目录element-plus dialog v-loading不生效使用版本问题解决element-plus el-dialog使用v-loading指令失效总结
element-plus dialog v-loading不生效
使用版本 “element-plus”: “1.3.0-beta.4”

问题 el-dialog的v-loading 这样使用没反应。


解决 定义ref 并使用 ElLoading.service

setup定义

const me = ref(null)
ElLoading.service({ target: me.value.dialogRef })

// html
<el-dialog v-model="dialogVisible" custom-class="demo" @opened="initDialog">1111</el-dialog>
 
// ts
const initDialog = () => {
  // 用服务生成一个el-loading实例，包括了自定义svg的指令如何在服务中使用
  let demo = ElLoading.service({ target: '.demo', text: '加载中...', background: 'rgba(122, 122, 122, 0.1)', svg: svg, 'svgViewBox': '-10, -10, 50, 50' })
  setTimeout(() => {
    // 延时执行关闭，对应dom清除，如要再使用loading，需重新生成新实例
    demo.close()
  }, 5000)
}