vue-cli3 按需加载loading，服务的方式调用

安装 babel-plugin-component

npm install babel-plugin-component -S

安装element-ui

npm install element-ui -D

修改babel.config.js

"plugins": [["component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]

按需引入loading，比如在axios的封装中过滤器中使用loading：

import {Loading} from 'element-ui'

调用loading

let loadingInstance=Loading.service({lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'});

关闭loading

loadingInstance.close();

实际使用中可以对其进行封装，demo:

import {Loading} from 'element-ui'
class MyLoading{
    constructor(){
        this.loadingOption={lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'};
    }
    close(){
        this.loading.close();
    }
    open(){
        this.loading=Loading.service(this.loadingOption)
    }
}
export default MyLoading

使用的时候：

import MyLoading from '../util/loading'
let loadingInstance=new MyLoading();
loadingInstance.open();
    setTimeout(function(){
        loadingInstance.close();
    },2000);