vue3 数字滚动递增特效插件

vue2 很多都不好用，也不带ts，自己就随便写了一个

<template>
  <div class="number-grow-warp">
    <span
      ref="numberGrow"
      :data-time="time"
      class="number-grow"
      :data-value="value"
      >0</span
    >
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, getCurrentInstance } from 'vue'
type ValueType = number
//如果是typescirpt4 eslint需要定义一下NodeJs 参考下一篇文章
type interValueProps = NodeJS.Timer | null
interface ISwitchProps {
  time: ValueType
  value: ValueType
}

export default defineComponent({
  props: {
    time: {
      type: Number,
      default: 2
    },
    value: {
      type: Number,
      default: 0
    }
  },
  setup(props: ISwitchProps) {
    onMounted(() => {
      numberGrow((getCurrentInstance() as any).ctx.$refs.numberGrow)
    })
    const numberGrow = (ele: any) => {
      const step = (props.value * 10) / (props.time * 1000)
      let current: ValueType = 0
      let start: ValueType = 0
      let t: interValueProps = setInterval(() => {
        start += step
        if (start > props.value) {
          clearInterval(Number(t))
          start = props.value
          t = null
        }
        if (current === start) {
          return
        }
        current = start
        ele.innerHTML = current
          .toFixed(0)
          .toString()
          .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
      }, 0.01)
    }
    return {
      numberGrow
    }
  }
})
</script>


<style>
.number-grow-warp {
  transform: translateZ(0);
}
.number-grow {
}
</style>

复制过去引入组件即可

<global-number :value="1000"></global-number>