const open = ref(false) // 控制 el-dialog 的弹出和关闭 const mv = ref() // 用于接收 el-dialog 对象 const dialogPanel = ref() // 接收 ElLoading.service对象,用于关闭 Loading // el-dialog 触发 Loading 的函数 function initDialog () { dialogPanel.value = ElLoading.service({ target: mv...
details.show = true; //就是下面这个部分,记得选择器最好给Dialog加上class或者id, //因为如果有多个Dialog就会默认选择第一个 this.details.loadingInstance = this.$loading({ target: '.box .el-dialog' }); } } 子组件 //在想要关闭的地方直接调用这个即可 this.data.loadingInstance.close(); 说明 ...
1. 检查el-loading和dialog的兼容性 Element Plus 或 Element UI 中的 el-loading 组件通常是兼容 el-dialog 的。如果 el-loading 无法在 el-dialog 中使用,可能是使用方式不正确或存在其他干扰因素。 2. 确保el-loading的引入和注册正确 确保您已经在项目中正确引入了 el-loading 组件。如果您是使用 Vue 并通...
使用v-loading指令方式,因为Dialog的最外层元素是全屏,故遮罩为全屏。 <template> <div> <el-button type="text" @click="dialogVisible = true; loading = true">Open Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" v-loading="loading" > <span>this is a...
个人猜测是Element Plus组件库的v-loading指令不支持el-dialog组件上使用 解决方案1 加一个全局loading,Element Plus组件库不但可以通过v-loading指令实现,也支持以服务的形式实现,关键代码如下: import{ElLoading}from"element-plus";constloading =ElLoading.service({lock:true,text:"数据加载中...",background:"...