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