vue3-count-to实现数字动态增长效果

vue3-count-to 是一个用于 Vue 3的数字计数动画库，常用于在页面上实现数字的动态增长效果，类似于从某个起始值渐变到目标值的效果。它可以用来显示各种数字、统计数据或展示动画效果。

1 安装 vue3-count-to

首先，你需要安装 vue3-count-to 包：

npm install vue3-count-to

或者使用 yarn:

yarn add vue3-count-to

二 属性

vue3-count-to 提供了一些常用的属性来控制动画效果：

• start-val: 起始值（默认为 0）。
• end-val: 目标数字（必选项）。
• duration: 动画时长（单位：毫秒），控制从起始值到目标值的过渡时间。
• prefix: 设置数字的前缀。
• suffix: 设置数字的后缀。
• decimals: 设置数字的小数位数（默认为 0）。
• decimal: 设置小数点分隔符。

属性	描述	类型	默认值
startVal	起始值	Number	0
endVal	结束值	Number	2017
duration	持续时间（以毫秒为单位）	Number	3000
autoplay	自动播放	Boolean	true
decimals	分割小数	Number	0
decimal	设置小数点分隔符	String	.
separator	分隔符	String	,
prefix	前缀	String	''
suffix	后缀	String	''

三 案例

 <countTo :startVal='startVal' :endVal='endVal' :decimals="2" decimal="," separator="." :duration='3000'></countTo>

let startVal = ref(0)
let endVal = ref(0)
let totalRecharge = ref(null)
let interval = ref(null)


const getTotalRecharge = (() => {
  api.getTotalRecharge().then((data) => {
    totalRecharge.value = data.resource.totalRecharge
  })
})
// 通过watch,把起始值设置为请求后端接口后旧的数据，把结束值设置为新的数据
watch(totalRecharge, (newValue, oldValue) => {
  startVal.value = oldValue
  endVal.value = newValue
})

onMounted(() => {
  getTotalRecharge()
  clearInterval(interval.value)
  interval.value = setInterval(() => {
    getTotalRecharge()
  }, 15000)
})

onBeforeUnmount(() => {
  clearInterval(interval.value)
})