實現數字翻轉的效果上面為出來的樣子

下面為代碼，使用的時候直接引入，還有就是把圖片的路徑自己換成自己或者先用顏色替代，傳入num和numlength即可

<template><div v-for="(item, index) in processedNums" :key="index" class="filp_box"><divclass="card-container":class="{ entry: flipState[index] }"v-if="item == '.'"><!-- <div class="line"></div> --><div class="card1 card-item">.</div><div class="card2 card-item">.</div><div class="card3 card-item">.</div><div class="card4 card-item">.</div></div><div class="card-container" :class="{ entry: flipState[index] }" v-else><!-- <div class="line"></div> --><div class="card1 card-item">{{ item }}</div><div class="card2 card-item">{{ item }}</div><div class="card3 card-item">{{ item }}</div><div class="card4 card-item">{{ item }}</div></div></div>
</template><script>
export default {props: {nums: {validator: function(value) {// 判斷值是否為數字或者可以轉換為數字的字符串return !isNaN(value) || typeof value === 'string';},required: true,default: () => 0,},numlength: {type: Number,default: 7,},},watch: {nums(newVal, oldVal) {// 重置所有翻轉狀態this.flipState = this.processedNums.map(() => false);let newnum = this.processedNumsWatch(newVal);let oldnum = this.processedNumsWatch(oldVal);// 使用$nextTick確保DOM已更新后再觸發動畫this.cleanTimer= setTimeout(() => {newnum.forEach((item, index) => {if (item != oldnum[index]) {this.flipState[index] = true;}});}, 50);},numlength(newVal, oldVal) {// 重置所有翻轉狀態this.flipState = this.processedNums.map(() => false);},},data() {return {flipState: [], // 用于記錄每個數字容器的翻轉狀態cleanTimer: null,};},computed: {// 計算屬性來處理nums，這里簡單地假設處理邏輯是添加一個id字段processedNums() {let string = this.nums.toString();// 字符串轉數組let array = Array.from(string);//   數組補0let valueArr = this.padArray(array, this.numlength);return valueArr;},},methods: {// 補0padArray(arr, max) {while (arr.length < max) {arr.unshift("0");}return arr;},processedNumsWatch(val) {let string = val.toString();// 字符串轉數組let array = Array.from(string);//   數組補0let valueArr = this.padArray(array, this.numlength);return valueArr;},},beforeDestroy() {clearTimeout(this.cleanTimer);},
};
</script>
<style scoped>
.filp_box {display: inline-block;margin: 0 1px;
}
.card-container {width: 27px;height: 40px;/* background: #000000; */position: relative;
}
.line {position: absolute;z-index: 100;width: 100%;background-color: #fff;height: 3px;top: 49%;
}
.card-item {position: absolute;width: 100%;height: 50%;overflow: hidden;
}.card1 {font-size: 36px;font-family: "myFontNum";font-weight: bold;line-height: 40px;text-align: center;color: #fff;background: url("./TTTT5.png") no-repeat center;
}.card2 {font-size: 36px;font-family: "myFontNum";font-weight: bold;line-height: 0px;color: #fff;text-align: center;top: 50%;background: url("./BBBBBFD.png") no-repeat center;transform-origin: center top;backface-visibility: hidden;transform: rotateX(180deg);z-index: 2;
}.card3 {font-size: 36px;font-family: "myFontNum";font-weight: bold;color: #fff;line-height: 40px;text-align: center;background: url("./TTTT5.png") no-repeat center;transform-origin: center bottom;backface-visibility: hidden;z-index: 2;
}.card4 {font-size: 36px;font-family: "myFontNum";font-weight: bold;color: #fff;top: 50%;line-height: 0px;text-align: center;/* overflow: hidden; */background: url("./BBBBBFD.png") no-repeat center;
}.card-container.entry .card2 {transition: 0.5s;transform: rotateX(0deg);
}.card-container.entry .card3 {transition: 0.5s;transform: rotateX(-180deg);
}
</style>

使用示例

?<FlipCard :nums="propsnum" :numlength="7" />