elementUI中的loading

先安裝引入

import ElementUI from 'element-ui'
import { Loading } from 'element-ui'

在vue的原型鏈上定義一個打開loading的方法

Vue.prototype.openLoading = function() {
  const loading = this.$loading({           // 聲明一個loading對象
    lock: true,                             // 是否鎖屏
    text: '正在加載...',                     // 加載動畫的文字
    spinner: 'el-icon-loading',             // 引入的loading圖標
    background: 'rgba(0, 0, 0, 0.3)',       // 背景顏色
    target: '.sub-main',                    // 需要遮罩的區域
    body: true,                              
    customClass: 'mask'                     // 遮罩層新增類名
  })
  setTimeout(function () {                  // 設定定時器，超時5S后自動關閉遮罩層，避免請求失敗時，遮罩層一直存在的問題
    loading.close();                        // 關閉遮罩層
  },5000)
  return loading;
}

在開始請求接口是調用改方法，因為我們是直接定義在VUE原型鏈上的方法，所以我們可以直接this調用

const rLoading = this.openLoading();

請求成功后執行關閉操作：

rLoading.close();