给el-dialog添加loading

### 实现 `el-dialog` 组件中的加载效果 在 Vue2 和 Element UI 的开发环境中，如果希望在 `el-dialog` 组件中实现加载效果（loading），可以通过以下方式完成： #### 方法一：通过 `v-loading` 属性绑定 可以直接利用 `el-dialog` 提供的原生支持属性 `v-loading` 来设置加载状态。需要注意的是，在某些情况下，由于 DOM 更新机制的原因，可能需要手动触发下一帧渲染来确保样式生效。 以下是具体代码示例： ```vue <template> <el-dialog title="对话框" :visible.sync="dialogVisible" v-loading="loading"> <!-- 对话框内容 --> <p>这是一个带有加载动画的对话框。</p> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, loading: false, // 控制 loading 状态 }; }, methods: { openDialog() { this.dialogVisible = true; this.loading = true; setTimeout(() => { this.loading = false; // 延迟关闭 loading 动画 }, 2000); } } }; </script> ``` 在此方法中，`this.loading` 被用来控制加载动画的状态，并且通过 `setTimeout` 模拟了一个异步操作[^1]。 --- #### 方法二：使用 `$nextTick` 确保 DOM 及时更新 有时直接修改数据无法立即反映到视图层，可以借助 Vue 的生命周期钩子函数 `$nextTick()` 来解决此问题。它会等待当前 DOM 渲染完成后执行回调逻辑。 下面是改进后的版本： ```javascript methods: { asyncOperation() { this.loading = true; this.$nextTick(() => { // 使用 $nextTick 确保 DOM 已经更新 setTimeout(() => { for (let i = 0; i < this.addNumber; i++) { this.addNode(this.currentIndex + i + 1); } this.loading = false; // 关闭 loading }, 1000); // 模拟耗时任务 }); } } ``` 这种方法能够有效避免因同步更新导致的视觉异常[^1]。 --- #### 方法三：自定义遮罩层 当内置功能不满足需求时，还可以创建一个独立的遮罩层用于显示加载提示信息。这种方式更加灵活可控。 HTML 结构如下所示： ```html <div class="custom-mask" v-if="showCustomLoading">正在加载...</div> <el-dialog ...></el-dialog> ``` CSS 部分则需调整位置使其覆盖整个弹窗区域： ```css .custom-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); color: white; display: flex; justify-content: center; align-items: center; z-index: 999; } ``` 最后记得管理好变量 `showCustomLoading` 的切换时机即可。 --- ### 总结 以上三种方案分别适用于不同场景下的实际应用需求。推荐优先尝试第一种基于官方特性的简单配置；对于复杂业务流程，则考虑引入额外工具或者定制化解决方案。