vue3实现动态文字翻滚效果，时钟效果

效果图，每个文字都是独立翻滚得，长度是五位数得，如果使用得vue2，可以进行修改，样式得话使用了windicss

<template>
	<div class="w-full flex justify-center items-center">
		<div
			v-for="(item, index) in numList"
			:key="index"
			class="num-item w-32px h-42px text-26px text-center"
		>
			<div
				v-for="(child, childIndex) in 10"
				:key="childIndex"
				:style="{ ...style(item) }"
				class="deluge_led_font"
			>
				{{ childIndex }}
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { computed, watch, onMounted, ref } from "vue";
const props = defineProps({
	number: {
		type: Number,
		default: 0,
	},
	// 位数
	quantity: {
		type: Number,
		default: 5,
	},
	// 是否从零开始变化
	delayed: {
		type: Boolean,
		default: true,
	},
	// 过度时间
	time: {
		type: Number,
		default: 2000,
	},
	// 过度动画速度
	timing: {
		type: String,
		default: "ease",
	},
});
const num = ref(0);
const numArr = computed(() => {
	if (num.value) {
		return (num.value + "").split("");
	} else {
		return new Array(num.value + "".length).fill(0);
	}
});
const numList = computed(() => {
	let arr = [];
	let len = numArr.value.length;
	if (props.quantity && props.quantity > len) {
		arr = [...new Array(props.quantity - len).fill(0), ...numArr.value];
	} else {
		arr = numArr.value;
	}
	return arr;
});
watch(
	() => props.number,
	(newValue, oldValue) => {
		num.value = newValue;
	}
);
const style = (e: any) => {
	return {
		transform: `translateY(-${e * 100}%)`,
		transition: props.time + "ms",
		transitionTimingFunction: props.timing,
		textAlign: "center",
	};
};
onMounted(() => {
	if (props.delayed) {
		setTimeout(() => {
			num.value = props.number;
		}, 300);
	} else {
		num.value = props.number;
	}
});
</script>
<style lang="scss" scoped>
.num-item {
	overflow: hidden;
	margin-right: 12px;
	color: #ffff00;
	font-size: 30px;
	background: url(@/assets/homePage/left/xiaqu/Bg_Area_number.png);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	&:last-child {
		margin-right: 0;
	}
}
</style>