Vue element-ui之Loading 加载

Loading 加载：加载数据时显示动效。

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

实例：

let loading;

//定义加载动画
function startLoading() {
    // Loading.service(options); options 参数为 Loading 的配置项
    // 使用loading变量来接收Loading.service返回的实例
   
    loading = Loading.service({
        lock:true,    //是否锁定
        text:"拼命加载中...",   //显示在加载图标下方的加载文案
        background:'rgba(0,0,0,.7)',   //遮罩背景色
    });
}

//结束加载动画，调用该实例的 close 方法来关闭
function endLoading(){
    loading.close();
}