vue3 el-dialog loading失效
时间: 2025-01-08 07:40:35 浏览: 83
### Vue3 中 `el-dialog` 组件加载效果失效解决方案
对于在 Vue3 和 Element Plus 中遇到的 `el-dialog` 组件上的 `v-loading` 指令无法正常工作的现象[^1],推荐采用 ElLoading 服务的方法来替代直接使用指令。
#### 使用 ElLoading.Service 实现 Loading 效果
通过调用 `ElLoading.service()` 方法可以在任何 DOM 节点上创建自定义的 loading 层。此方法返回一个关闭函数用于手动控制 loading 的显示与隐藏状态。下面是一个具体的例子展示如何应用到 `el-dialog` 上:
```javascript
import { ref, onMounted } from 'vue';
import { ElDialog, ElButton, ElLoading } from 'element-plus';
export default {
components: {
ElDialog,
ElButton
},
setup() {
const dialogVisible = ref(false);
let loadingInstance;
function openDialogAndShowLoading() {
dialogVisible.value = true;
nextTick(() => {
loadingInstance = ElLoading.service({
target: document.querySelector('.custom-class'), // 对应对话框的内容区域类名
fullscreen: false,
lock: true,
text: 'Loading',
spinner: 'el-icon-loading'
});
});
}
function closeDialogAndHideLoading() {
if (loadingInstance) {
loadingInstance.close();
}
dialogVisible.value = false;
}
return {
dialogVisible,
openDialogAndShowLoading,
closeDialogAndHideLoading
};
}
};
```
在此代码片段中,当打开对话框时会触发 `openDialogAndShowLoading` 函数启动 loading 动画;而点击取消按钮或其他逻辑操作则会执行 `closeDialogAndHideLoading` 来停止动画并关闭对话框[^2]。
为了确保正确的目标元素被选中作为 loading mask 的容器,建议给 `<el-dialog>` 添加特定 class 并将其传递给 `target` 参数。这有助于防止样式冲突以及提高性能表现[^3]。
阅读全文
相关推荐














