Element Loading的全局使用方法(自定义Loading)

方法一:写在axios的配置中,在请求拦截器中调用,响应拦截器里面关闭

import axios from 'axios';
import qs from 'qs';
import { Message, Loading } from 'element-ui';
import { getToken } from "@/utils/token.js";
const baseUrl=`http://157:8852`;
const service = axios.create({
  baseURL: baseUrl,
  timeout: 60000,
});

service.defaults.headers["Content-Type"] = "application/json;charset=utf-8";

let loading = null; //定义loading变量

//开始 加载loading
let startLoading = () => {
  loading = Loading.service({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.8)'
  })
}
//结束 取消loading加载
let endLoading = () => {
  loading.close();
}

let needLoadingRequestCount = 0 //声明一个变量
 
let showFullScreenLoading = () => {
  if (needLoadingRequestCount === 0) { //当等于0时证明第一次请求 这时开启loading
    startLoading()
  }
  needLoadingRequestCount++ //全局变量值++ 
}
 
let tryHideFullScreenLoading = () => {
  if (needLoadingRequestCount <= 0) return //小于等于0 证明没有开启loading 此时return
  needLoadingRequestCount-- //正常响应后 全局变量 --
  if (needLoadingRequestCount === 0) {  //等于0 时证明全部加载完毕 此时结束loading 加载
    endLoading();
  }
}

// 请求拦截器
service.interceptors.request.use((config) => {
    if (getToken()) {
      config.headers["Authorization"] = getToken();
    }
  if (config.url.indexOf('queryExecuteOnce') > -1) {
    console.log("1111", config.url);
  } else {
    //开启loading加载
    showFullScreenLoading();
  }
  return config;
}, (err) => {
  Message.error('请求失败!');
  return Promise.reject(err);
})

// 响应拦截器
service.interceptors.response.use((response) => {
  if (response.data.code == 302) {
    Message.warning('登录超时，请重新登录！');
    return;
  }
  //关闭loading加载
  tryHideFullScreenLoading();
  return response
}, (err) => {
  tryHideFullScreenLoading();
  if (err.toString().indexOf('Error: timeout') !== -1) {
    Message.warning('网络请求超时!');
    return Promise.reject(err);
  } else {
    Message.error('服务器响应失败，请稍后再试!');
    return Promise.reject(err);
  }
})

 方法二:将自定义样式写在公共css中,在需要的文件里面进行调用

代码块:

 //公共css样式

.svg-container .el-input__inner {

    padding-left: 40px;

  }

  .svg-container .flex {

    display: flex;

    align-items: center;

    height: 100%;

  }

  .el-loading-spinner .circular {

    display: none;

  }

  .el-loading-spinner {

    width: 100px;

    height: 100px;

    top: 50%;

    left: 50%;

    transform: translate(-50px, -50px);

    background: url("../assets/img/loading.png");

    background-size: 100% 100%;

    margin-top: 0px;

  }

  .el-loading-mask {

    z-index: 9999 !important;

  }

//vue文件调用方法

    handleClickOne() {

      const loading = this.$loading({

        lock: true,

        text: "",

        spinner: "",

        background: "rgba(255, 255, 255, 0.8)",

      });

      setTimeout(() => {

        loading.close();

      }, 2000);

    },

方法三:封装在utils公共方法中,在需要的页面进行调用

代码块: 

import { Loading } from 'element-ui'

let loadingCount = 0

let loading

const startLoading = () => {

  loading = Loading.service({

    lock: true,

    text: '查验中,请稍等……',

    background: 'rgba(0, 0, 0, 0.5)',

    color: '#fff',

  })

}

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()

  }

}