Element-UI 中 loading 的使用

一：
一般element-ui都是给表格加loading效果，也可以给整个页面（body）加loading效果。


当然也可以页面上的任何DOM加loading效果。


在查询button的标签上添加onSearch方法。


<el-button  type="primary"  @click="onSearch">查询</el-button>
1
onSearch() {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)',
      target: document.querySelector('.div1')
    });
    setTimeout(() => {
      loading.close();
    }, 2000);




也有取消loading效果的方法


loading.close()




二：


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 — —