elementui 加载中_从ElementUI的loading组件说起

原文地址：

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