v-loading使用(来自官网介绍)
记录使用Element-UI的v-loading指令。Element提供了两种调用Loading的方法:指令和服务。指令对于自定义指令v-loading,只需要绑定Boolean即可,默认情况下,loading遮罩会插入到绑定元素的子节点通过添加 body修饰符,可以使遮罩插入至DOM中的body上。自定义加载文案、图标和背景色在绑定了v-loading指令的元素上添加elemen...
记录使用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 | – |
更多推荐
所有评论(0)