vue3-count-to实现数字动态增长
一、安装 vue3-count-to1.首先，你需要安装 vue3-count-to 包：
npm install vue3-count-to
或者使用 yarn:
yarn add vue3-count-to
二、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 ‘’
三、实例
vue代码引用
<countTo :startVal='startVal' :endVal='endVal' :decimals="2" decimal="," separator="." :duration='3000'></countTo>
vue空间变量初始化：let startVal = ref(0)
let endVal = ref(0)
let numberValue= ref(null)//展示的数字
let tiemInterval= ref(null)//计时器
//接口获取展示的数字的值
const getPueTotalRecharge = (() => {
api.getNumberValueApi().then((data) => {
numberValue.value = data.resource.number
})
endVal.value = numberValue.value
})
//定时
timerPueVavlue.value = window.setInterval(() => {
getPueTotalRecharge()//pue值
}, 3000)
onMounted(() => {
getnumberValue()
})
onUnmounted(() => {
window.clearInterval(tiemInterval.value)
})
页:
[1]