数据滚动效果的实现

利用CountUp实现数字的滚动效果
pnpm add countup.js

<span ref="count1Ref">{{ number1 }}</span>
import { nextTick, watch } from 'vue';
import { CountUp } from 'countup.js'
const count1Ref = ref<HTMLElement>()

watch(()=>props.panelItems, (newV, oldV)=>{
  //在下一次dom更新完成之后会回调 
  nextTick(()=>{
    startAnimation(newV)
  })

})
// 给数字执行滚动的动画
function startAnimation(panelItems = []) {
   // 等 dom更新 完成之后执行
   const option1 = {
    decimalPlaces: 1, // 保留一位小数点 
    duration: 2,
    useGrouping: false, // 1000 -> 1,000
    prefix: props.amount === 'saleroom' ? '¥' : ''
  }
  const option2 = {
    decimalPlaces: 1, // 保留一位小数点 
    duration: 2,
    useGrouping: false, // 1000 -> 1,000
    suffix: '%'
  }
  panelItems.forEach((item)=>{
    new CountUp(count1Ref.value!, item.totalNum, option1).start()
    new CountUp(count1Ref.value!, item.percentage, option2).start()
  })

}