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);