You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.3 KiB
115 lines
2.3 KiB
4 weeks ago
|
<!-- src/components/GlobalLoading.vue -->
|
||
|
|
<template>
|
||
|
|
<div class="content-loading-overlay" v-if="isLoading">
|
||
|
|
<div class="loading-content">
|
||
|
|
<div ref="lottieContainer" class="animation-container"></div>
|
||
|
|
<!-- <div class="loading-text">{{ text }}</div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import lottie from 'lottie-web'
|
||
|
|
import { mapState } from 'vuex'
|
||
|
|
import defaultAnimation from '@/assets/loadingAni.json' // 导入JSON文件
|
||
|
|
export default {
|
||
|
|
name: 'GlobalLoading',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
text: '加载中',
|
||
|
|
autoplay: true,
|
||
|
|
animationData: defaultAnimation,
|
||
|
|
animInstance: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(['isLoading', 'loadingText'])
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$nextTick(()=>{
|
||
|
|
this.initAnimation()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initAnimation() {
|
||
|
|
console.log('1====000000');
|
||
|
|
this.animInstance = lottie.loadAnimation({
|
||
|
|
container: this.$refs.lottieContainer,
|
||
|
|
renderer: 'svg',
|
||
|
|
loop: true,
|
||
|
|
// autoplay: true,
|
||
|
|
animationData: this.animationData
|
||
|
|
})
|
||
|
|
console.log(this.animInstance,'this.animInstance---');
|
||
|
|
if (this.animInstance) {
|
||
|
|
this.animInstance.play()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
show(text = '加载中...') {
|
||
|
|
this.text = text
|
||
|
|
this.isLoading = true
|
||
|
|
if (this.animInstance) {
|
||
|
|
this.animInstance.play()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hide() {
|
||
|
|
this.isLoading = false
|
||
|
|
if (this.animInstance) {
|
||
|
|
this.animInstance.stop()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setAnimationData(data) {
|
||
|
|
this.animationData = data
|
||
|
|
this.initAnimation()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
if (this.animInstance) {
|
||
|
|
this.animInstance.destroy()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
.global-loading {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
/* 关键样式 */
|
||
|
|
.content-loading-overlay {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: rgba(255, 255, 255, 0.8);
|
||
|
|
z-index: 1000; /* 确保高于内容 */
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-content {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animation-container {
|
||
|
|
width: 160px;
|
||
|
|
height: 160px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
</style>
|