vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element-plus dialog v-loading不生效

element-plus dialog v-loading不生效问题及解决

作者:K歌、之王

这篇文章主要介绍了element-plus 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 })

补充

今天我试了下最新版本 “element-plus”: “^2.1.6”, 然后 me.value.dialogRef 获取不到了。。。

element-plus el-dialog使用v-loading指令失效

目前解决方法是使用实例,效果是整个dialog模块存在loading,包括header,footer,内容和右上关闭按钮

// 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)
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文