elementUI全局loading单例模式
前⾯写过⼀次loading组件的js组件使⽤：
elementUI提供了loading组件的简便使⽤：
1、在table等组件上绑定指令：v-loading="loading"，然后通过控制变量loading的值为true或false，切换显⽰和隐藏
<el-table v-loading="loading">
2、在使⽤指令的基础上，⾃定义加载⽂案、图标和背景⾊：
<el-table
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData">
3、以上都是给单个的组件添加loading条，如果要给整页进⾏加载：fullscreen修饰符将遮罩插⼊到body上，lock修饰符锁定屏幕滚动
<el-button v-loading.fullscreen.lock="fullscreenLoading">指令⽅式</el-button>
4、整页加载可以使⽤服务的⽅式，遮罩默认为全屏，不需要额外设置修饰符fullscreen：
<el-button @click="handleClick">服务⽅式</el-button>
handleClick() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
java单例模式双重锁
loading.close();
}, 2000);
}
5、配合axios做全局的设置：
实际项⽬中发现，如果某个页⾯请求多个接⼝，且每个接⼝都返回很慢的话，实际看到的效果是虽然Loading会出现，但是当第⼀个接⼝返回值以后后⾯的Loading都不会出现了，就会出现页⾯数据从⽆到有的过滤，⽤户体验较差。
原来，是因为elementUI的全屏Loading是单例的：如果前⼀个Loading关闭之前再次调⽤了下⼀个Loading并不会创建⼀个新的实例，返回的仍然是当前这个Loading实例；同理，当调⽤任意⼀个close()⽅法都会关闭这个Loading实例。因为这⼏个接⼝都是同⼀时间请求的，也就是说当前页⾯⼏个Loading实例其实都是同⼀个，所以关闭后也就都关闭了。
import axios from 'axios'
import { Message, Loading } from 'element-ui'
let instance = ate({
baseURL: '',
timeout: 60000
})
/* 当页⾯有两个接⼝时，第⼀个接⼝loading的close事件会直接将第⼆个接⼝的loading实例也close */
let loadingInstance = null
function startLoading () {
loadingInstance = Loading.service({
fullscreen: true,
text: '拼命加载中...',
background: 'rgba(0, 0, 0, 0.8)'
})
}
function endLoading () {
loadingInstance.close()
}
let needLoadingRequestCount = 0
function showFullScreenLoading () {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
function tryHideFullScreenLoading () {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
// 请求拦截
quest.use((config) => {
showFullScreenLoading()
return config
}, (error) => {
tryHideFullScreenLoading()
<({message: '请求超时!'})
ject(error)
})
// 响应拦截
sponse.use((response) => {
tryHideFullScreenLoading()
if (response.data && de && de === 200) {
return response.data
} else {
Message({
message: response.data.msg || '接⼝错误',
type: 'error'
})
}
}, (error) => {
tryHideFullScreenLoading()
ject(error)
})
export default instance
每次创建Loading实例的时候判断当前是否存在，如果当前还没有Loading实例就创建⼀个，如果有就不会再创建⽽是计数；每次关闭的时候判断当前的计数，如果是0了就关闭，否则也计数减⼀，直到为0的时候表⽰当前所有页⾯所有接⼝都返回结束了，此时执⾏关闭Loading.close()操作关闭菊花。
service()中没有参数对象时，
有参数对象时，
loadingInstance = Loading.service({
fullscreen: true,
text: '拼命加载中...',
background: 'rgba(0, 0, 0, 0.8)'
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。