Element Plus组件v-loading在el-dialog组件上使用无效
目录
前情
坑位
Why?
解决方案1
解决方案2
解决方案3
前情
公司有经常需要做一些后台管理页面，我们选择了Element Plus，它是基于 Vue 3，面向设计师和开发者的组件库，是Vue框架生态中比较火的UI组件库，组件库丰富易用，组件链接：一个 Vue 3 UI 框架 | Element Plus，对于请求服务数据交互提供一个loading加载中效果是一个提高用户体验的好方法。
坑位
最近在开发一个需求，点击操作按钮根据传入的id获取相应数据渲染el-dialog组件内容，我于是按正常方式使用v-loading指令实现加载中loading效果，但事与愿违，v-loading失效了……
Why?
个人猜测是Element Plus组件库的v-loading指令不支持el-dialog组件上使用
解决方案1
加一个全局loading，Element Plus组件库不但可以通过v-loading指令实现，也支持以服务的形式实现，关键代码如下：
import { ElLoading } from "element-plus";const loading = ElLoading.service({lock: true,text: "数据加载中...",background: "rgba(255, 255, 255, 0.6)"
});setTimeout(() => {loading.close();
}, 1500);解决方案2
既然el-dialog不支持v-loading指定，我们可以把loading效果加在弹窗组件的内容容器里，关键代码如下：
<template><el-button plain @click="dialogVisible = true">Click to open the Dialog</el-button><el-dialogv-model="dialogVisible"title="Tips"width="500"append-to-body><template #header><div class="font-size-20 font-bold">弹窗标题</div></template><div v-loading="true" class="main-content"></div><template #footer><div class="flex justify-end gap-2"><el-button @click="dialogVisible = false">取消</el-button></div></template></el-dialog>
</template><script lang="ts" setup>
import { ref } from 'vue'const dialogVisible = ref(false)</script>
解决方案3
Element Plus组件库支持以服务的方式来实现loading效果，细看文挡当以服务的方式实现loading效果的时候，你会发现它还支持loading效果要插入的容器组件，于是有了下面的解决方法，el-dialog组件通过custom-class添加自定义class，再把loading组件插入自定义的class容器中，关键代码如下：
WARNING
custom-class已被 弃用, 之后将会在 2.4.0 移除, 请使用class.
注意版本
<template><el-button plain @click="dialogVisible = true">Click to open the Dialog</el-button><el-dialogv-model="dialogVisible"title="Tips"width="500"class="dialog"@open="handleOpen"><template #header><div class="font-size-20 font-bold">弹窗标题</div></template><div class="main-content"></div><template #footer><div class="flex justify-end gap-2"><el-button @click="dialogVisible = false">取消</el-button></div></template></el-dialog>
</template><script lang="ts" setup>
import { ref } from 'vue'const dialogVisible = ref(false)import { ElLoading } from "element-plus";const handleOpen = () => {const loading = ElLoading.service({lock: true,text: "数据加载中...",fullscreen: false,target: '.dialog',background: "rgba(255, 255, 255, 0.6)"});setTimeout(() => {loading.close();}, 1500);
}
</script>