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

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

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

相关推荐
ohMyGod_1232 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜052 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界2 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku2 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员2 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句2 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿2 小时前
Web第二次笔记
前端·javascript
Dream耀3 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
P7Dreamer3 小时前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
洋流3 小时前
0基础进大厂,第12天:ES6语法基础篇
javascript