Vue3 Element Plus 对话框加载实现

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

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

vue

复制

下载

<template>
  <el-button @click="openDialog">打开对话框</el-button>

  <el-dialog
    v-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-dialog
    v-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="正在拼命加载..."

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

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