如何在 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 来显示和隐藏加载动画。

<template>
  <div>
    <el-button @click="startLoading">开始加载</el-button>
    <el-button @click="stopLoading">停止加载</el-button>
  </div>
</template>

<script>
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();
      }
    }
  }
};
</script>

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

---

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 基础知识。如果你对某个部分不太理解，欢迎留言讨论！

---