77 lines
2.4 KiB
Vue
77 lines
2.4 KiB
Vue
<template>
|
|
<div @click="open">
|
|
<img class="btn-img" :src="currentImgSrc" alt="" />
|
|
<img class="btn-img" v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" alt="" style="display: none;" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
myMixins
|
|
} from "@/mixins/mixins.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentFrameIndex: 0,
|
|
imgList: [
|
|
'static/an/btn/0.png', 'static/an/btn/1.png', 'static/an/btn/2.png', 'static/an/btn/3.png',
|
|
'static/an/btn/4.png', 'static/an/btn/5.png', 'static/an/btn/6.png', 'static/an/btn/7.png',
|
|
'static/an/btn/8.png', 'static/an/btn/9.png', 'static/an/btn/10.png', 'static/an/btn/11.png',
|
|
'static/an/btn/12.png', 'static/an/btn/13.png', 'static/an/btn/14.png', 'static/an/btn/15.png',
|
|
'static/an/btn/16.png', 'static/an/btn/17.png', 'static/an/btn/18.png', 'static/an/btn/19.png',
|
|
'static/an/btn/20.png', 'static/an/btn/21.png', 'static/an/btn/22.png', 'static/an/btn/23.png',
|
|
'static/an/btn/24.png', 'static/an/btn/25.png', 'static/an/btn/26.png', 'static/an/btn/27.png',
|
|
'static/an/btn/28.png', 'static/an/btn/29.png', 'static/an/btn/30.png', 'static/an/btn/31.png',
|
|
'static/an/btn/32.png', 'static/an/btn/33.png', 'static/an/btn/34.png', 'static/an/btn/35.png',
|
|
'static/an/btn/36.png', 'static/an/btn/37.png', 'static/an/btn/38.png', 'static/an/btn/39.png',
|
|
'static/an/btn/40.png', 'static/an/btn/41.png', 'static/an/btn/42.png', 'static/an/btn/43.png',
|
|
'static/an/btn/44.png', 'static/an/btn/45.png', 'static/an/btn/46.png', 'static/an/btn/47.png',
|
|
'static/an/btn/48.png', 'static/an/btn/49.png'
|
|
],
|
|
delay: 40,
|
|
timer:null
|
|
};
|
|
},
|
|
computed: {
|
|
currentImgSrc() {
|
|
return this.imgList[this.currentFrameIndex];
|
|
}
|
|
},
|
|
watch:{
|
|
btnTimer(){
|
|
console.log("this.btnTimerthis.btnTimer:",this.btnTimer)
|
|
if(this.btnTimer){
|
|
this.startAnimation();
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
this.startAnimation();
|
|
},
|
|
methods: {
|
|
open(){
|
|
this.$emit('click')
|
|
},
|
|
startAnimation() {
|
|
this.btnTimer = setInterval(() => {
|
|
this.currentFrameIndex = (this.currentFrameIndex + 1) % this.imgList.length;
|
|
}, this.delay);
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
// 在页面离开时清除定时器
|
|
clearInterval(this.btnTimer)
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.btn-img {
|
|
width: 576rpx;
|
|
height: 250rpx;
|
|
object-fit: contain;
|
|
}
|
|
</style>
|
|
|