父组件
<DigitalFlopVue :total-hj="digitalShow"/>
let digitalShow=ref(15488)
//下拉框切换 生成随机数展示
function changeXsq(value){
console.log(value)
digitalShow.value=Math.floor(Math.random()*30000)
}
组件DigitalFlop.vue
<template>
<!-- <div>{{ animatedNumber }}</div> -->
<div style="display: flex;justify-content: space-between;">
<div class="ball" v-for="(item,index) in list" :key="index">
<span style="font-size: 5vh;line-height: 5.5vh;font-weight: bold;">{{ item }}</span>
</div>
</div>
</template>
<script lang="ts">
import gsap from "gsap";
export default {
props: ['totalHj'],
data() {
return {
number: 0,
tweenedNumber: 0,
list: [],
temp: 0
}
},
computed: {
animatedNumber: function () {
return this.tweenedNumber.toFixed(0)
}
},
methods: {
changeNumber() {
gsap.to(this.$data, {
duration: 0.5, tweenedNumber: this.totalHj, onUpdate: () => {
this.list = this.tweenedNumber.toFixed(0).toString().split('');
}
});
}
},
created() {
this.changeNumber()
},
watch: {
totalHj: function (newData, oldData) {
this.changeNumber();
},
}
}
</script>
<style lang="scss" scoped>
.ball {
height: 5.5vh;
width: 4vh;
border-radius: 1vh;
background-color: #1d48c1;
border: 1px solid;
margin-right: 2vh;
}
</style>