vue 数字滚动特效

想自己简单实现一个数字滚动特效，基础原理比较简单，提出了一个公用组件

项目的框架为vue3+ts+antd vue3

缺点是：我还没想好怎么使用transition或animation动效，使滚动效果柔和一些

代码展示如下：

<!--
 * @Author: fy
 * @Date: 2022-11-30 09:55:58
 * @Description: 公用接口-自定义数字滚动特效
-->
<template>
  <a-statistic v-bind="property" :value="currentNumber" />
</template>

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

const props = defineProps({
  // 要展示的值
  number: {
    type: Number,
    default: 0,
  },
  //属性绑定
  property: {
    type: Object,
    default: () => ({}),
  },
});
// 滚动值变量值
const currentNumber = ref(0);
// 定时器
const intervalNumber = ref(undefined);
// 数值改变时，动效加载
watch(
  () => props.number,
  () => {
    setAnimateNumber();
  }
);
/**
 * 组件卸载，关闭定时器
 * @returns {*}
 */
onUnmounted(() => {
  clearInterval(intervalNumber.value);
});

/**
 * 数据滚动
 * @returns {*}
 * @param {*} value 需要滚动的数字
 */
const setAnimateNumber = () => {
  // 根据要展示的长度
  const showCountLength = props.number.toString().length;
  // 需要滚动的次数
  let animateCount = 25;
  //  根据要展示的长度，决定滚动的时间
  let animateTime = showCountLength > 3 ? 60 : 100;
  // 根据要展示的数字大小，决定滚动值的大小
  const randomValue = Math.pow(10, showCountLength) * showCountLength;
  // 滚动数字
  intervalNumber.value = setInterval(() => {
    animateCount--;
    currentNumber.value = Math.floor(Math.random() * randomValue);
    // 滚动次数截止，显示数量，清空定时器
    if (animateCount === 0) {
      currentNumber.value = props.number;
      clearInterval(intervalNumber.value);
    }
  }, animateTime);
};
</script>

<style lang="less" scoped>
</style>