vue 组件全局封装_vue封装页面全局加载子组件

1. 首先我们看一下 Element 中的加载方式，设置加载配置

openFullScreen2() {

const loading = this.$loading({

lock: true,

text: 'Loading',

spinner: 'el-icon-loading',

background: 'rgba(0, 0, 0, 0.7)'

});

setTimeout(() => {

loading.close();

}, 2000);

}

}

text 是要显示的文字，spinner 是显示的图标

2.在封装组件之前我们需要看一下文档

3.创建loading.js 文件

import { Loading } from 'element-ui';

// 引入 加载图标 loading

// 设置 加载的数据

let loadingCount = 0;

let loading;

const startLoading = () => {

loading = Loading.service({

lock: true,

text: '任务下发中······',//可以自定义文字

spinner:'el-icon-loading',//自定义加载图标类名

background: 'rgba(0, 0, 0, 0.7)'//遮罩层背景色

});

};

const endLoading = () => {

loading.close();

};

export const showLoading = () => {

if (loadingCount === 0) {

startLoading();

}

loadingCount += 1;

};

export const hideLoading = () => {

if (loadingCount <= 0) {

return;

}

loadingCount -= 1;

if (loadingCount === 0) {

endLoading();

}

};

4. 在页面中引入

标签：spinner,loading,const,Loading,vue,封装,loadingCount,加载

来源： https://www.cnblogs.com/tdcqcrtd/p/13985684.html