vue3数字滚动组件

直奔主题，vue3的数字滚动组件js版本代码如下：

<template>
  <div class="scroll-number">
    <transition-group class="scroll-number-box" name="list" tag="p">
      <div
        v-for="(item, index) in numList"
        :style="{
          left: index * marginBetween + 'px',
          'transition-delay': 0.1 * index + 's',
        }"
        :key="item + index"
      >
        {{ item }}</div
      >
    </transition-group>
  </div>
</template>

<script>
import { onMounted, reactive } from 'vue';
  export default {
    props: {
      numList: {
        type: Array,
        default: [],
        require: true
      },
      marginBetween: {
        type: Number,
        default: 20,
      }
    },
  };
</script>

<style lang="less" scoped>
  .scroll-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    &-box {
      position: relative;

      > div {
        position: absolute;
        display: inline-block;
      }
    }

    .list-enter-active,
    .list-leave-active {
      transition: transform 1s ease, opacity 1s ease;
    }

    .list-enter-from {
      opacity: 0;
      transform: translateY(50%);
    }

    .list-leave-to {
      opacity: 0;
      transform: translateY(-50%);
    }
  }
</style>

在父组件需要import导入组件并components注册使用。

<ScrollNumber :numList="num" :marginBetween="15" />

当前的组件初步配置了数字格式以及数字之间间距的传参，numList的格式为Array数组，传入内容可参考[“1”, “2”, “3”, “4”]；marginBetween格式为Number数字。

另外如果不想使用父子组件传值的方式，可自行对组件进行适当的改造。

参考：花10分钟用Vue 实现 1 个数字滚动效果