v-loading使用(来自官网介绍)

记录使用Element-UI的v-loading指令。Element提供了两种调用Loading的方法：指令和服务。

指令

对于自定义指令 v-loading，只需要绑定 Boolean即可，默认情况下，loading遮罩会插入到绑定元素的子节点通过添加 body修饰符，可以使遮罩插入至DOM中的body上。

自定义加载文案、图标和背景色

在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似的，element-loading-spinner和element-loading-background属性分别用来设定图标的类名和背景色值。

<div
  v-loading="true"
  element-loading-text="拼命加载中"
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
>
</div>

全屏loading
当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至body上），喜事若需要锁定屏幕的盾冬，可以使用lock修饰符。（当使用服务方式时，遮罩默认即为全屏，无需额外设置）

<div
  v-loading.fullscreen.lock="true"
  element-loading-text="拼命加载中"
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
>
</div>

服务

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

import { Loading } from 'element-ui';

在需要调用时：

Loading.service(options);

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

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

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

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

此时调用它们中任意一个的close方法都能关闭这个全屏 Loading。

如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法loading，它的调用方式为：this.$loading(options)，同样会返回一个 Loading 实例。

option

参数	说明	类型	默认值
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	–