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