数字滚动组件

安装插件

npm i gsap

NumberTo.vue 定义value值进行通信 设置响应式变量d从0开始滚动到渲染的值

// 这里可以设置精度
<template>
    {{ d.num.toFixed(0) }}
</template>

<script setup>
  import { reactive,watch } from "vue"
  import gsap from "gsap"


const props = defineProps({
      value:{
          type:Number,
          default:0
      }
  })
  const d = reactive({
    num:0
  })


  function AnimateToNumber(){
      // 0.5秒内从0滚动到传过来的value值
      gsap.to(d,{
          duration:0.5,
          num:props.value
      })
  }
  AnimateToNumber()
  watch(()=>props.value,()=>AnimateToNumber())
</script>

这样使用

<span class="text-3xl font-bold text-gray-500">
     <NumberTo :value="item.value" />
</span>