建立全域性Loading方法

 

在做專案的時候，我們在很多地方需要使用到Loading效果，雖然Element有攜帶，可直接按照案例使用，但是感覺過於麻煩了。

全域性資料夾建立完成後，需在main.js中匯入並宣告註冊

//main.js檔案

//引入
import Global from './globalFun'


//宣告註冊

Vue.use(Global)

1. 我們在Vue專案裡的src中建立一個存放全域性方法的資料夾，“globalFun”，裡面包含modules資料夾和index.js檔案。其中modules是註冊方法的資料夾，index.js是引入和新增全域性API的檔案
2. 首先在modules資料夾中建立loading.js檔案，並編寫程式碼

   import { Loading } from 'element-ui'
   
   const Fullloading = { fullscreen: true, text: '資料載入中...', spinner: 'el-icon-loading', customClass: 'pp', background: 'rgba(0, 0, 0, 0.7)' }
   
   let loadingIns
   export default class loadEvents {
     open() {
       loadingIns = Loading.service(Fullloading)
     }
     close() {
       loadingIns.close()
     }
   }
   
   //引數說明 
   
   
   //fullscreen：是否全屏，lock：是否需要鎖定螢幕的滾動， customClass:繫結的class（區域性載入），text：自定義文案，spinner：自定義圖示，background：自定義背景色

    

3.完成loading.js檔案程式碼編寫後，在index.js中進行全域性說明呼叫方式

import loadEvents from './modules/loading'

export default function(Vue) {
  // 新增全域性API
  const loads = new loadEvents()
  Vue.prototype.$u = {
    loads
  }
}

4.最後頁面的使用方式

//開啟 

this.$u.loads.open()


//關閉

this.$u.loads.close()