【笔记】公共方法Loading

import { Loading } from 'element-ui'
let loading = null // 定义loading变量

// 开始 加载loading
const startLoading = (text = '请耐心等待...') => {
loading = Loading.service({
    lock: true,
    text: text,
     background: 'rgba(0, 0, 0, 0.7)'
  })
}

// 结束 取消loading加载
const endLoading = () => {
  loading.close()
}

// showFullScreenLoading() 与 tryHideFullScreenLoading() 目的是合并同一页面多个请求触发loading
let needLoadingRequestCount = 0 // 声明一个变量

const showFullScreenLoading = (text) => {
  if (needLoadingRequestCount === 0) { // 当等于0时证明第一次请求 这时开启loading
  startLoading(text)
  }
  needLoadingRequestCount++ // 全局变量值++
}

const tryHideFullScreenLoading = () => {
  if (needLoadingRequestCount <= 0) return // 小于等于0 证明没有开启loading 此时return
  needLoadingRequestCount-- // 正常响应后 全局变量 --
   if (needLoadingRequestCount === 0) { // 等于0 时证明全部加载完毕 此时结束loading 加载
    endLoading()
  }
}
const loadingObj = {
  showFullScreenLoading,
  tryHideFullScreenLoading
}
export default loadingObj

全局注册 main.js

import loadingObj from '文件地址'
Vue.prototype.loadingObj = loadingObj

使用

const loadingMessage = '修改中，请耐心等待...'
this.loadingObj.showFullScreenLoading(loadingMessage)

this.loadingObj.tryHideFullScreenLoading()