el-dialog添加全局loading加载动画

### 实现 `el-dialog` 中的全局加载动画 为了在 Element UI 的 `el-dialog` 组件中实现全局加载动画效果，可以按照如下方式操作： #### 导入必要的模块 首先确保已经正确导入了 Element UI 及其样式文件[^2]。 ```html <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` #### 创建对话框并设置加载状态 接着可以在 Vue 组件内创建一个用于控制加载状态的数据属性，并初始化为 false。当打开对话框时启动加载动画；数据请求完成后再将其关闭。 ```javascript // 定义Vue实例或组件选项对象中的data部分 data() { return { dialogVisible: false, isLoading: false // 新增此字段表示当前是否处于加载状态 }; } ``` #### 使用 Loading Service 启动和停止加载动画 通过调用 `Loading.service()` 方法开启加载服务，并保存返回的服务实例以便稍后能够调用 `.close()` 关闭它[^1]。 ```javascript methods: { openDialogWithLoading() { this.isLoading = true; const loadingInstance = this.$loading({ lock: true, text: '正在加载...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); setTimeout(() => { // 模拟异步操作后的处理逻辑 this.dialogVisible = true; // 延迟一段时间模拟网络延迟或其他耗时任务结束后再隐藏加载提示 setTimeout(() => { loadingInstance.close(); this.isLoading = false; }, 2000); // 这里假设两秒之后结束加载过程 }, 500); } } ``` #### 将上述方法绑定至按钮点击事件或者其他触发条件上 最后一步就是将上面定义的方法关联到实际的应用场景当中去，比如某个按钮被按下时执行该函数。 ```vue <template> <!-- ...其他HTML结构... --> <button @click="openDialogWithLoading">显示带加载动画的弹窗</button> <el-dialog :visible.sync="dialogVisible" width="30%"> 如果需要的话还可以在这里放置更多内容... </el-dialog> <!-- ...其余代码... --> </template> ``` 这样就完成了在一个基于Element UI框架下的项目中，在`el-dialog`展示之前加入全屏范围内的加载指示器的功能实现了。