vue利用gsap封装数字滚动组件

<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 AnimateToValue(){
    gsap.to(d,{
        duration:0.5,
        num:props.value
    })
}

AnimateToValue()
//监听传过来的值是否变化，如果变化了，就在执行一次
watch(()=>props.value,()=>AnimateToValue())

</script>

在需要使用的组件中引入封装的组件，然后在对应位置双向绑定数据使用

<CountTo :value="item.value"></CountTo>