element-plus dialog v-loading不生效问题及解决
更新时间：2023年03月30日 14:48:15 作者：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)
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
这篇文章主要介绍了解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-12-12
这篇文章给大家介绍了vue数据传递的方法，包括，父组件向子组件传值 ，子组件向父组件传值 ，路由传值等多种方法，需要的朋友参考下2018-04-04
这篇文章主要给大家介绍了关于vue3父子组件传值中props使用细节的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue中keep-alive的用法及问题描述,本文给大家介绍的非常详细，具有一定的参考解决价值，需要的朋友可以参考下2018-05-05
最近在研究框架，也仔细用了Vue3一些功能，所以本文就来和大家聊聊Vue3如何实现优雅的监听localStorage的变化，感兴趣的小伙伴可以跟随小编一起学习一下2023-06-06
这篇文章主要介绍了VUE el-tree组件左边勾选，右边清除交互问题，具有很好的参考价值，希望对大家有所帮助。2023-04-04
这篇文章主要介绍了vue响应式原理的的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-06-06
使用Vue3和Plotly.js打造一个3D图在线展示的实现步骤
三维网格图广泛应用于科学可视化、医学成像、工程设计等领域,用于展示复杂的数据结构和空间分布,本文给大家介绍了使用Vue3和Plotly.js打造一个3D图在线展示的实现步骤,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了解决v-model双向绑定失效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
今天小编就为大家分享一篇vue 监听屏幕高度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论