我要评论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()
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论