Vue3 大屏数字滚动效果

 父组件：

<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>

子组件：

<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>