Element Plus组件v-loading在el-dialog组件上使用无效

前情

公司有经常需要做一些后台管理页面，我们选择了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-dialog width="500px">
    <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="close">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.main-content{
	width: 100%;
	height: 400px;
}
</style>

解决方案3

Element Plus组件库支持以服务的方式来实现loading效果，细看文挡当以服务的方式实现loading效果的时候，你会发现它还支持loading效果要插入的容器组件，于是有了下面的解决方法，el-dialog组件通过custom-class添加自定义class，再把loading组件插入自定义的class容器中，关键代码如下：

<template>
  <el-dialog
    v-model="isOpen"
    @open="onOpen"
    @close="onClose"
    custom-class="dialog-loading-warp"
    width="500px"
  >
    <template #header>
      <div class="font-size-20 font-bold">结清买断</div>
    </template>
    <div>
    我是弹窗主内容
    </div>
    <template #footer>
      <div class="flex justify-end gap-2">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
	import { ElLoading } from "element-plus";

	const loading = ElLoading.service({
	  lock: true,
	  text: "数据加载中...",
	  fullscreen: false,
	  target: 'dialog-loading-warp'
	  background: "rgba(255, 255, 255, 0.6)"
	});
	  
	setTimeout(() => {
		loading.close();
	}, 1500);
</script>

<style lang="scss" scoped></style>

总结

上面三种方式都能解决问题，可以根据自己的实际情况来决定使用哪一种方式，当然解决的方法也绝不止上面三种，如果你有更好的解决方案欢迎留言一起讨论。