vue3封装数字上下滚动翻牌器，

优点：可以传入字符串设置初始数字位数，也可以直接传入数字，让他自己根据位数渲染

组件代码：

<template>
  <div class="count-flop" :key="compKey">
    <!--  -->
    <div
      :class="item !== '.' ? 'count-flop-box' : 'count-flop-point'"
      v-for="(item, index) in value"
      :key="index"
    >
      <div v-if="item !== '.'" class="count-flop-content" :class="['rolling_' + item]">
        <div v-for="(item2, index2) in numberList" :key="index2" class="count-flop-num">
          {{ item2 }}
        </div>
      </div>
      <div v-else class="count-flop-content">.</div>
    </div>
    <!--  -->
    <div v-if="suffix" class="count-flop-unit">{{ suffix }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, defineProps } from "vue";

const props = defineProps({
  val: {
    type: [Number, String],
    default: 0,
  },
  suffix: {
    type: String,
    default: "",
  },
});

// Data
const value = ref<string[]>([]);
const numberList = ref<number[]>([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
const compKey = ref<number>(0);

// Watcher
watch(
  () => props.val,
  (newVal) => {
    console.log(newVal, "222222222222222222");

    value.value = newVal.toString().split("");
    compKey.value += 1;
  },
  { immediate: true },
);
</script>

<style scoped>
.count-flop {
  display: inline-block;
  font-size: 0;
  /* 可更改 */
  height: 100px;
  line-height: 100px;
  font-size: 50px;
  font-weight: 700;
  color: #4898f1;
}

.count-flop > div {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 100%;
}

.count-flop-box {
  /* 可更改 */
  margin-right: 5px;
  width: 86px;
  border: 1px solid rgba(72, 152, 241, 0.3);
  /*
  这里的高度要比上面height的少2px
  */
  line-height: 98px;
  border-radius: 6px;
}

.count-flop-point {
  /* 可更改 */
  margin-right: 5px;
  width: 10px;
}

.count-flop-content {
  font-family: MicrosoftYaHei-Bold;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  animation-fill-mode: forwards !important;
}

.rolling_0 {
  animation: rolling_0 2.1s ease;
}

@keyframes rolling_0 {
  from {
    transform: translateY(-90%);
  }
  to {
    transform: translateY(0);
  }
}

.rolling_1 {
  animation: rolling_1 3s ease;
}

@keyframes rolling_1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}

/* 其他 rolling_X 动画略 */
</style>

引用示列：

<template>
 <DigitalScrollersComp :val="valS" />
</template>
<script setup lang="ts">
import { reactive, onMounted, ref, toRefs, watch } from "vue";
const valS = ref<string | number>("0000");
onMounted(() => {
  setTimeout(() => {
    valS.value = 1004;
  }, 3000);
});
const valS = ref<string | number>("0000");
onMounted(() => {
  setTimeout(() => {
    valS.value = 1004;
  }, 3000);
});