vue 中單獨封裝一個loading模塊

vue 中單獨封裝一個loading模塊

import { Loading } from 'element-ui'

// loading實例
let loadingInstance = null
// 個數
let loadingCount = 0

// 關閉loading框
export const finishLoading = () => {
  loadingCount--
  if (loadingInstance && loadingCount === 0) {
    loadingInstance.close()
    loadingInstance = null
  }
}

// 開啓loading框
export const startLoading = ({
  text = '數據加載中...',
  fullscreen = true,
  spinner = 'el-icon-loading',
  needLoading = true
} = {}) => {
  loadingCount++
  // 上一個請求的loading還存在，就不需要繼續生成loading服務
  if (needLoading && !loadingInstance) {
    loadingInstance = Loading.service({
      fullscreen,
      text,
      spinner,
      background: 'rgba(0, 0, 0, 0.7)'
    })
  }
}