其他分享
首页 > 其他分享> > 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