vue 封装 loading 组件

这是页面 loading 封装,不是table loading封装.
main.js

import 'element-ui/lib/theme-chalk/index.css'

loading.js

import {
     
  Loading
} from 'element-ui';

let loadingCount = 0;
let loading;
const startLoading = () => {
     
  loading = Loading.service({
     
    target: document.querySelector(".downInfo")
  });
};

const endLoading = () => {
     
  loading.close();
};

export const showLoading = () => {
     
  if (loadingCount === 0) {
     
    startLoading();
  }
  loadingCount += 1;
};

export const hideLoading = () => {
     
  if (loadingCount <= 0) {
     
    return;
  }
  loadingCount -= 1;
  if (loadingCount === 0) {
     
    endLoading();
  }
};

ajax封装工具类:

import {
     
  showLoading,
  hideLoading
} from '../../components/loading';

  ajaxMethod(urlObj, url, params, callBack, tips) {
     
    if (document.querySelector(".downInfo")) {
     
      showLoading()
    }
    axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');
    axios[typeof (urlObj) == 'string' ? 'get' : urlObj.type](url, params || {
     }, {
     
      'headers': {
     
        'Content-Type': 'application/json'
      }
    }).then(function (res) {
     
      const result = res.data
      if (document.querySelector(".downInfo")) {
     
        hideLoading()
      }
      callBack(res, result)
      if (tips !== '加载') {
     
        ModalUtil.messageSuccess(tips + '成功')
      }
    }).catch(err => {
     
      ModalUtil.messageError(err.response.data.message)
      store.commit("loadingMutation", false);
      if (document.querySelector(".downInfo")) {
     
        hideLoading()
      }
    })
  },