1.效果图
2.下面为封装好的代码，在页面中引入即可 html
<template><div id="flip-container" v-if="flag == false"><div id="digit-1"class="digit">0</div><div id="digit-2"class="digit">0</div><div id="digit-3"class="digit">0</div><div id="digit-4"class="digit">0</div><!-- <div id="digit-5" class="digit" >0</div> --></div><div id="flip-container" v-if="flag"><div id="digit-1"class="digit">0</div><div id="digit-2"class="digit">0</div><div id="digit-3"class="digit">0</div><div id="digit-4"class="digit">0</div><div id="digit-5" class="digit" >0</div></div>
</template>
3.javaScript
<script setup>import {onMounted,defineProps} from 'vue'// defineProps中括号的值是传值页面等号左边的值const props = defineProps(['data'])let flag = falsevar data1 = props.datadata1 = digitize(data1)if (data1.length == 4) {// flag = false} else if (data1.length == 5) {flag = true}function digitize (n) { //接受一个number类参数，拆分成一个数组并返回var str = n + ""; //加上空字符中，把接收的参数转换为字符串var arr = []; //声明结果空数组，稍后返回str.split("").forEach(function (item) { //调用split，以空字符串为分隔符切割字符串并返回数组，在数组上调用forEach方法arr.push(parseInt(item)); //对传入的每个字符用pasreInt转换为数字并压入arr数组})return arr; //返回结果数组}function fetchData(){// 遍历每一位数字for (var i = 0; i < data1.length; i++) {var digitElement = document.getElementById('digit-' + (i + 1));var currentDigit = parseInt(digitElement.innerText);var newDigit = parseInt(data1[i]);// 如果当前数字和新数字不相等，则翻转数字if (currentDigit !== newDigit) {digitElement.classList.add('flipped');// 使用 setTimeout 延迟恢复正常状态，等待翻转动画完成(function (element, digit) {setTimeout(function () {element.innerText = digit;element.classList.remove('flipped');}, 500);})(digitElement, newDigit);}}}onMounted(()=>{fetchData()})
</script>
4.css
<style>
#flip-container {display: flex;justify-content: center;margin-bottom: 20px;margin-left: 8px;
}.digit {width: 15px;height: 33px;background-color: #1488cc;color: #00ffff;font-size: 20px;text-align: center;transform-style: preserve-3d;perspective: 1000px;margin-left: 5px;transition: transform 1s ease-in-out;border-radius: 2.5696px;line-height: 33px;
}.digit.flipped {transform: rotateX(180deg);
}
</style>
5.需要页面引入即可
<flipper v-if="fourTodayTotalWeightFlag" :data="todayTotalWeight"></flipper><div>当日收货量(Kg)</div>import flipper from '@/components/flipper/flipper.vue'
