elementui $loading

element-ui $loading 使用指南

element-ui 的 $loading 是全局加载指示器，常用于异步操作时显示加载状态。以下是其核心用法和配置选项：

基本用法

通过 this.$loading 调用，返回一个 Loading 实例，需手动关闭：

const loadingInstance = this.$loading({
  lock: true,
  text: '加载中...',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});

// 异步操作完成后关闭
setTimeout(() => {
  loadingInstance.close();
}, 2000);

配置参数

服务式调用

也可通过 Loading.service 直接创建：

import { Loading } from 'element-ui';

const loadingInstance = Loading.service(options);
loadingInstance.close();

注意事项

1. 需确保在异步操作完成后调用 close()，否则加载动画会持续显示
2. 多次调用 $loading 会创建多个实例，需分别关闭
3. 在 Vue 组件销毁前应主动关闭加载状态，可在 beforeDestroy 钩子中处理

完整示例

export default {
  methods: {
    fetchData() {
      const loader = this.$loading({
        text: '拼命加载中...',
        background: 'rgba(255,255,255,0.5)'
      });

      axios.get('/api/data')
        .then(res => {
          // 处理数据
        })
        .finally(() => {
          loader.close();
        });
    }
  }
}

通过合理配置参数，可实现不同场景下的加载状态提示，提升用户体验。