在 Vue3 + Element Plus 中实现对话框加载效果，可以通过以下两种方式实现：

方式一：使用 v-loading 指令（推荐）

vue

复制

下载

<template><el-button @click="openDialog">打开对话框</el-button><el-dialogv-model="dialogVisible"title="加载中对话框"@open="handleOpen"><!-- 使用 v-loading 指令 --><div v-loading="isLoading" style="min-height: 150px"><div v-if="!isLoading"><!-- 你的实际内容 -->加载完成的内容...</div></div></el-dialog>
</template><script setup>
import { ref } from 'vue';const dialogVisible = ref(false);
const isLoading = ref(false);const openDialog = () => {dialogVisible.value = true;
};const handleOpen = async () => {isLoading.value = true;try {// 模拟异步请求await new Promise(resolve => setTimeout(resolve, 2000));// 这里可以放置你的真实请求} finally {isLoading.value = false;}
};
</script>

方式二：使用 ElLoading 服务（局部加载）

vue

复制

下载

<template><el-button @click="openDialog">打开对话框</el-button><el-dialogv-model="dialogVisible"title="加载中对话框"@open="handleOpen"><div ref="dialogContent" style="min-height: 150px"><!-- 你的实际内容 --><div v-if="data">{{ data }}</div></div></el-dialog>
</template><script setup>
import { ref } from 'vue';
import { ElLoading } from 'element-plus';const dialogVisible = ref(false);
const dialogContent = ref(null);
const data = ref(null);const openDialog = () => {dialogVisible.value = true;
};const handleOpen = async () => {// 创建加载实例const loadingInstance = ElLoading.service({target: dialogContent.value,text: '拼命加载中...',background: 'rgba(255, 255, 255, 0.5)'});try {// 模拟异步请求await new Promise(resolve => setTimeout(resolve, 2000));data.value = '加载完成的内容...';} finally {// 关闭加载loadingInstance.close();}
};
</script>

两种方式对比：

1. v-loading 指令：

   • 更简单直接

   • 内置加载动画和样式

   • 自动处理 DOM 容器

2. ElLoading 服务：

   • 更灵活，可以自定义加载文本和背景

   • 需要手动管理加载实例

   • 需要指定具体加载容器

优化建议：

• 在 finally 块中关闭加载状态，确保异常情况下也能关闭加载

• 可以为加载状态添加文字提示：v-loading="isLoading" element-loading-text="正在拼命加载..."

• 如果内容高度不确定，建议设置最小高度避免布局抖动

• 对于表单场景，可以在提交时使用类似方法防止重复提交