父组件：
<template>
<div class="homePage">
<NumRoll v-for="(v, i) in numberList" :key="i" :number="v"></NumRoll>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import NumRoll from '@/views/components/numRoll.vue'
const numberList = ref([0])
const number = ref(1200)
onMounted(() => {
numberList.value = number.value.toString().split('').map(item => Number(item))
setInterval(()=>{
number.value = Math.round(Math.random() * (100000 - 1000) + 1000);
numberList.value = number.value.toString().split('').map(item => Number(item))
},2000)
})
</script>
<style lang='scss' scoped>
.homePage {
padding: 10px;
display: flex;
}
</style>文章来源：https://www.toymoban.com/news/detail-635702.html
子组件：
<template>
<div class="box">
<span class="num" :style="{transform: `translate(-50%, -${number * 10}%)`}">0123456789</span>
</div>
</template>
<script setup>
import { onMounted } from 'vue'
const props = defineProps({
number: {
type: Number,
default: 5,
required: true,
},
});
onMounted(() => { })
</script>
<style lang='scss' scoped>
.box {
height: 82px;
width: 54px;
line-height: 82px;
text-align: center;
background-color: #149373;
border-radius: 10px;
margin-right: 5px;
// CSS属性定义文本行是否水平或垂直布置以及块扩展的方向。
writing-mode: vertical-lr;
// 文字方向 竖直
text-orientation: upright;
position: relative;
overflow: hidden;
}
.num {
font-size: 62px;
position: absolute;
left: 50%;
top:7px;
color: #ffffff;
transition: all 1.5s;
}
</style>
文章来源地址https://www.toymoban.com/news/detail-635702.html
到了这里，关于Vue3 大屏数字滚动效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
