ElementUI $loading-elementuiloading遮罩层

在使用ElementUI进行页面开发时，有时需要为用户提供一个加载中的视觉提示，以避免用户在数据加载过程中误操作。ElementUI 提供了$loading服务，可以方便地创建一个遮罩层来显示加载状态。接下来将介绍如何使用ElementUI的$loading方法创建遮罩层，并提供多种实现思路。

解决方案

ElementUI的$loading方法提供了非常简单的API，可以在组件中通过this.$loading()调用。它能够返回一个关闭函数，调用该函数就可以关闭遮罩层。开发者可以根据实际需求，在合适的地方开启和关闭遮罩层，比如在发起网络请求前开启，请求完成后关闭。

基础使用示例

以下是一个基本的使用案例：

javascript
// 在组件的methods中定义一个方法
methods: {
  loadData() {
    // 开启遮罩层
    const loadingInstance = this.$loading({
      lock: true, // 是否锁定屏幕滚动
      text: 'Loading', // 加载文案
      spinner: 'el-icon-loading', // 自定义加载图标
      background: 'rgba(0, 0, 0, 0.7)' // 遮罩层背景颜色
    });</p>

<pre><code>// 模拟异步操作，例如axios请求
setTimeout(() => {
  // 异步操作完成，关闭遮罩层
  loadingInstance.close();
}, 2000);

}
}

高级使用方式

1. 使用指令式开启

除了直接调用this.$loading()外，还可以通过Vue的自定义指令来控制遮罩层的显示与隐藏。

javascript
Vue.directive('loading', {
bind(el, binding) {
let loading;
const defaultOptions = {
target: el,
text: '正在加载...',
fullscreen: false
};
const options = Object.assign(defaultOptions, binding.value || {});
const show = () => {
loading = Loading.service(options);
};
const hide = () => {
if (loading) {
loading.close();
loading = null;
}
};
el.showLoading = show;
el.hideLoading = hide;
},
inserted(el) {
el.showLoading();
},
update(el, binding) {
if (binding.oldValue !== binding.value) {
if (binding.value) {
el.showLoading();
} else {
el.hideLoading();
}
}
},
unbind(el) {
el.hideLoading();
}
});

然后在模板中使用：
```html

</p>

<h3><h2>2. 全局配置</h2></h3>

<p>如果希望在整个项目中统一设置加载遮罩层的样式或者行为，可以通过修改ElementUI的默认配置来实现全局配置。
```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';</p>

<p>Vue.use(ElementUI, {
  loading: {
    lock: true,
    text: '拼命加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  }
});

以上就是关于ElementUI $loading遮罩层的一些常见使用场景及其实现方式，开发者可以根据自己的业务需求选择最合适的方案。