elementui $loading

ElementUI $loading 使用方法

ElementUI 的 $loading 方法用于在页面或组件中显示加载状态，通常用于异步操作（如网络请求）期间提供视觉反馈。以下是其核心用法和配置选项：

基本调用方式

通过 this.$loading 在 Vue 组件中直接调用：

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

// 关闭加载状态
loadingInstance.close();

配置参数说明

• lock：布尔值，是否锁定屏幕（阻止用户交互），默认为 false。
• text：加载提示文字，支持字符串或 HTML 片段。
• spinner：加载图标类名（如 ElementUI 的图标 el-icon-loading）。
• background：遮罩背景色，支持 CSS 颜色值（如 rgba(0, 0, 0, 0.5)）。
• target：指定加载效果挂载的 DOM 节点，默认为 document.body。

全局注册与自定义

若需全局修改默认配置，可在 Vue 原型链上扩展：

// main.js 中设置默认参数
Vue.prototype.$loading = (options) => {
  return Loading.service({
    ...options,
    customClass: 'my-loading' // 自定义样式类
  });
};

注意事项

• 调用 close() 方法前需确保加载实例已创建。
• 多次调用 $loading 会创建多个实例，需独立关闭。
• 在 SSR（服务端渲染）环境中需避免使用，因依赖 DOM 操作。

示例：结合异步请求

async fetchData() {
  const loader = this.$loading({ lock: true });
  try {
    await axios.get('/api/data');
  } finally {
    loader.close();
  }
}