效果图,每个文字都是独立翻滚得,长度是五位数得,如果使用得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>