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-button plain @click="dialogVisible = true">
    Click to open the Dialog
  </el-button>

  <el-dialog
    v-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-dialog
    v-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>