|
|
@ -1,18 +1,19 @@ |
|
|
|
<template> |
|
|
|
<div class="content-loading-overlay" v-if="isLoading"> |
|
|
|
<div> |
|
|
|
<div class="content-loading-overlay" v-show="isLoading"> |
|
|
|
<div class="loading-content"> |
|
|
|
<div ref="animationContainer" class="animation-container"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else style="height: 100%;"> |
|
|
|
<div v-show="!isLoading"> |
|
|
|
<slot></slot> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import lottie from 'lottie-web' |
|
|
|
import { mapState } from 'vuex' |
|
|
|
import defaultAnimation from '@/assets/loadingAni.json' // 导入JSON文件 |
|
|
|
import defaultAnimation from '@/assets/loadingAni.json' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Loading', |
|
|
@ -26,41 +27,42 @@ export default { |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
isLoading(newVal) { |
|
|
|
this.$nextTick(() => { |
|
|
|
if (newVal) { |
|
|
|
this.$nextTick(()=>{ |
|
|
|
this.playAnimation() |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.stopAnimation() |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
if (this.isLoading) { |
|
|
|
this.playAnimation() |
|
|
|
} |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
this.stopAnimation() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
playAnimation() { |
|
|
|
// 销毁旧实例(可选,根据需求) |
|
|
|
if (this.anim) { |
|
|
|
this.anim.destroy() |
|
|
|
this.anim = null |
|
|
|
} |
|
|
|
|
|
|
|
console.log('执行动画') |
|
|
|
this.anim = lottie.loadAnimation({ |
|
|
|
container: this.$refs.animationContainer, |
|
|
|
renderer: 'svg', |
|
|
|
loop: true, |
|
|
|
autoplay: true, |
|
|
|
animationData: defaultAnimation // 你的JSON动画路径 |
|
|
|
animationData: defaultAnimation |
|
|
|
}) |
|
|
|
if (this.anim) { |
|
|
|
this.anim.play() |
|
|
|
} |
|
|
|
}, |
|
|
|
stopAnimation() { |
|
|
|
if (this.anim) { |
|
|
|
this.anim.stop() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
if (this.anim) { |
|
|
|
this.anim.destroy() // 组件销毁时彻底清理 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|