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. 在頁面中引入