Element-UI 中 loading 的使用

Element-UI 中 loading 的使用

一、一般element-ui可以给表格加loading，也可以给整个页面（body）加loading,此外也可以给页面上的任何DOM元素加loading

created(){
    this.getData();
}

getData(){
    const loading = this.$loading({
            lock: true,//lock的修改符--默认是false
            text: 'Loading',//显示在加载图标下方的加载文案
            spinner: 'el-icon-loading',//自定义加载图标类名
            background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
            target: document.querySelector('#table')//loadin覆盖的dom元素节点
    });
    //成功回调函数停止加载
    loading.close()
}

也可以延时几秒后停止加载

 //延时器
setTimeout(() => {
      loading.close();
 }, 2000);

二、Loading 还可以以服务的方式调用。引入 Loading 服务：

import { Loading } from 'element-ui';

在需要时调用

Loading.service(options);

其中 options 参数为 Loading 的配置项，具体见下表。LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它：

let loadingInstance = Loading.service(options);
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
  loadingInstance.close();
});

需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：

let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });
console.log(loadingInstance1 === loadingInstance2); // true

此时调用它们中任意一个的 close 方法都能关闭这个全屏 Loading。
如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 $loading，它的调用方式为：this.$loading(options)，同样会返回一个 Loading 实例。

参数说明如下表：

参数	说明	类型	默认值
target	Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点	object/string	document.body
body	同 v-loading 指令中的 body 修饰符	boolean	false
fullscreen	同 v-loading 指令中的 fullscreen 修饰符	boolean	true
lock	同 v-loading 指令中的 lock 修饰符	boolean	false
text	显示在加载图标下方的加载文案	string	____
spinner	自定义加载图标类名	string	____
background	遮罩背景色	string	____
customClass	Loading 的自定义类名	string	____