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

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

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

相关推荐
小样还想跑6 分钟前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者7 分钟前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者7 分钟前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端
用户38022585982436 分钟前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag40 分钟前
报错 400 和405解决方案
vue.js·spring boot
Web小助手1 小时前
js高级程序设计(日期)
javascript
白杨木影子被拉长1 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
Web小助手1 小时前
js高级程序设计(4/5章节)
javascript
山有木兮木有枝_1 小时前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
十盒半价1 小时前
从递归到动态规划:手把手教你玩转算法三剑客
javascript·算法·trae