原文地址:
从ElementUI的loading组件说起alfxjx.github.io前言
最近发现自己的主页首屏加载很慢,于是想用一个loading组件掩饰一下,这一下就来到了知识的荒原,对插件几乎一无所知,就知道v-model
之流,于是学习了一下element-ui
的写法,并自己写一个插件出来。
element ui 的loading文档
看一下loading的文档,发现loading除了常规的一些配置项之外,有指令式和服务式(directive&service)两种模式:
指令式是这样的:
<el-button
type="primary"
@click="openFullScreen"
v-loading.fullscreen.lock="fullscreenLoading">
指令方式
</el-button>
export default {
data() {
return {
fullscreenLoading: false
}
},
}
服务式是这样的:
import {
Loading } from 'element-ui';
let loadingInstance = Loading.service(options);
// 以服务的方式调用的 Loading 需要异步关闭
this.$nextTick(() => {
loadingInstance.close();
});