这篇文章主要介绍“element-plus dialog v-loading不生效问题如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“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) }
关于“element-plus dialog v-loading不生效问题如何解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程之家行业资讯频道,小编每天都会为大家更新不同的知识点。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。