element-ui 以服务的方式自定义Loading加载效果

1）创建一个loading.js文件
2）引入element-ui的loading组件

import { Loading } from 'element-ui';

3）自定义loading配置项

const loadOption={fullscreen: true ,lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'}

其中：fullscreen：是否全屏，lock：是否需要锁定屏幕的滚动，text：自定义文案，spinner：自定义图标，background：自定义背景色
4）使用LoadingService 创建一个 Loading 实例

let loadingInstance;

export default class loadEvents {
    constructor(vueThis){
        this.vm = vueThis ;  //vue中的this  也可以不用
    }
    open(){
        loadingInstance = Loading.service(loadOption);
    }
    close(){
        loadingInstance.close();
    }
}

5）使用

import loadEvents from '../utils/loading'

let loads = new loadEvents();

//loads.open();loading效果出现；loads.close();关闭loading效果

6）loading.js完整代码

import { Loading } from 'element-ui';

const loadOption={fullscreen: true ,lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'}

let loadingInstance;

export default class loadEvents {
    constructor(vueThis){
        this.vm = vueThis ;  //vue中的this  也可以不用
    }
    open(){
        loadingInstance = Loading.service(loadOption);
    }
    close(){
        loadingInstance.close();
    }
}