如何在 Element UI 中优雅地使用 `this.$loading` 显示和隐藏加载动画

技术文档

如何在 Element UI 中优雅地使用 `this.$loading` 显示和隐藏加载 动画

在现代 Web 应用开发中，用户体验至关重要。当执行耗时操作（如网络请求或数据处理）时，显示一个友好的加载动画可以让用户知道系统正在工作，而不是卡住了。Element UI 提供了一个非常方便的工具——this.$loading，用于显示全局或局部的加载动画。本文将详细介绍如何在 Vue 组件中使用 this.$loading 来显示和隐藏加载动画，并提供实用的代码示例。

1. 引言

在构建复杂的前端应用时，异步操作是不可避免的。无论是从服务器获取数据还是进行大量计算，都需要一些时间来完成。为了提升用户体验，我们通常会在这些操作期间显示一个加载动画。Element UI 的 this.$loading 工具可以帮助我们轻松实现这一目标。接下来，我们将详细介绍如何使用它。

2. 基本用法

显示加载动画

通过调用 this.$loading(options) 方法可以创建并显示加载动画。返回值是一个加载实例，可以通过该实例手动关闭加载动画。

let loadingInstance = this.$loading({ lock: true, // 是否锁定屏幕 text: \'加载中...\', // 显示的文本 spinner: \'el-icon-loading\', // 自定义加载图标 background: \'rgba(0, 0, 0, 0.7)\' // 背景遮罩颜色});

隐藏加载动画

可以通过调用加载实例的 close() 方法来关闭加载动画。

loadingInstance.close();

3. 完整示例

以下是一个完整的示例，展示如何在 Vue 组件中使用 this.$loading 来显示和隐藏加载动画。

  开始加载 停止加载 
export default { data() { return { loadingInstance: null // 存储加载实例 }; }, methods: { startLoading() { // 显示加载动画 this.loadingInstance = this.$loading({ lock: true, text: \'拼命加载中...\', spinner: \'el-icon-loading\', background: \'rgba(0, 0, 0, 0.7)\' }); }, stopLoading() { // 隐藏加载动画 if (this.loadingInstance) { this.loadingInstance.close(); } } }};

在这个示例中，我们创建了两个按钮：一个用于启动加载动画，另一个用于停止加载动画。点击“开始加载”按钮后，会显示一个带有自定义文本和图标的加载动画；点击“停止加载”按钮则会关闭该动画。

4. 关键点解析

(1) 参数配置

this.$loading 接受一个配置对象，常用的参数如下：

lock：是否锁定屏幕，防止用户交互。
text：加载提示文字。
spinner：自定义加载图标，默认为 el-icon-loading。
background：背景遮罩的颜色，支持透明度设置。

(2) 自动关闭

如果需要自动关闭加载动画，可以结合 setTimeout 使用。例如：

startLoading() { this.loadingInstance = this.$loading({ lock: true, text: \'加载中...\' }); // 模拟异步操作后自动关闭 setTimeout(() => { this.loadingInstance.close(); }, 3000); // 3秒后自动关闭}

(3) 局部加载

除了全局加载，还可以对某个 DOM 元素进行局部加载。只需在 options 中指定 target 即可。

let loadingInstance = this.$loading({ target: document.querySelector(\'#local-element\'), // 指定目标元素 text: \'局部加载中...\'});

5. 注意事项

避免重复创建

在调用 this.$loading 时，确保之前创建的加载实例已经关闭。否则可能会导致多个加载动画叠加。可以在显示新加载动画前检查是否存在旧实例，并手动关闭：

if (this.loadingInstance) { this.loadingInstance.close();}

异步操作中的异常处理

在异步操作（如 API 请求）中使用加载动画时，务必在 try-catch 或 finally 中关闭加载动画，以防止因异常导致加载动画无法关闭。

async fetchData() { let loadingInstance = this.$loading({ text: \'加载中...\' }); try { await someAsyncOperation(); // 模拟异步操作 } catch (error) { console.error(\'请求失败\', error); } finally { loadingInstance.close(); // 确保加载动画关闭 }}

样式覆盖

如果默认的加载样式不符合需求，可以通过 CSS 自定义样式。例如：

.el-loading-spinner .el-loading-text { font-size: 16px; color: #fff;}

6. 总结

通过 this.$loading，我们可以轻松实现全局或局部的加载动画，从而提升用户体验。无论是简单的按钮点击还是复杂的异步操作，都可以灵活地应用这一功能。如果你正在寻找一种优雅的方式来管理加载状态，那么这篇文章提供的解决方案无疑是一个不错的选择。

希望本文能为你带来启发，并帮助你在实际开发中解决问题！如果有其他问题或想要了解更多优化技巧，请留言讨论。

关注我获取更多前端开发技巧和实战经验！

注：本文假设读者已经具备一定的 Vue.js 和 Element UI 基础知识。如果你对某个部分不太理解，欢迎留言讨论！

如何在 Element UI 中优雅地使用 `this.$loading` 显示和隐藏加载动画