Vue3 Element Plus 对话框加载实现

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

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

vue

复制

下载

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

vue

复制

下载

两种方式对比：

1. v-loading 指令：

   • 更简单直接

   • 内置加载动画和样式

   • 自动处理 DOM 容器

2. ElLoading 服务：

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

   • 需要手动管理加载实例

   • 需要指定具体加载容器

优化建议：

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

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

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

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