關于Element Loading的全局使用(自定義Loading)

更新時間：2024年08月27日 16:56:44 作者：芒果沙冰喲

這篇文章主要介紹了關于Element Loading的全局使用(自定義Loading),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Element Loading的全局使用(自定義Loading)

方法一

寫在axios的配置中，在請求攔截器中調(diào)用，響應攔截器里面關閉

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) { //當?shù)扔?時證明第一次請求 這時開啟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('網(wǎng)絡請求超時!');
    return Promise.reject(err);
  } else {
    Message.error('服務器響應失敗，請稍后再試!');
    return Promise.reject(err);
  }
})

方法二

將自定義樣式寫在公共css中，在需要的文件里面進行調(diào)用

代碼塊：

//公共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文件調(diào)用方法
handleClickOne() {
const loading = this.$loading({
lock: true,
text: "",
spinner: "",
background: "rgba(255, 255, 255, 0.8)",
});
setTimeout(() => {
loading.close();
}, 2000);
},

方法三

封裝在utils公共方法中，在需要的頁面進行調(diào)用

代碼塊：

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