当前位置：首页 > news >正文

Vue3 Element Plus 对话框加载实现

news 2025/5/18 5:31:06

在 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>