vue+elementUI自定義全局加載中遮罩

1. 前提：項目完整引入了 Element， Vue.prototype 上會有一個全局方法 $loading，它的調用方式為：this.$loading(options)，會返回一個 Loading 實例
   
   
   
2. 自定義函數
   

   export function openLoading() {
     const loading = this.$loading({ // 聲明一個loading對象
       lock: true, // 是否鎖屏
       text: '拼命讀取中', // 加載動畫的文字
       spinner: 'el-icon-loading', // 引入的loading圖標
       background: 'rgba(0, 0, 0, 0.7)' // 背景顏色
     })
     setTimeout(function() { // 設定定時器，超時2S后自動關閉遮罩層，避免請求失敗時，遮罩層一直存在的問題
       loading.close() // 關閉遮罩層
     }, 2000)
     return loading
   }

    

3. 在main.js中引入並掛載到Vue實例上
   

   Vue.prototype.openLoading = openLoading

    

4. 使用：
   

   1. data中定義加載層信息變量rloading
     data() {
       return {
         rloading: []
       }
     }
   
   2. 進入頁面/請求接口前打開遮罩：
     this.rloading = this.openLoading()
   
   3. 數據響應之后關閉遮罩：
     this.rloading.close()