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 = oldValueendVal.value = newValue
})onMounted(() => {getTotalRecharge()clearInterval(interval.value)interval.value = setInterval(() => {getTotalRecharge()}, 15000)
})onBeforeUnmount(() => {clearInterval(interval.value)
})
