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

dmr

一、安装 vue3-count-to

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

1. npm install vue3-count-to
   

复制代码

或者使用 yarn:

1. 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代码引用

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

复制代码

vue空间变量初始化：

1. let startVal = ref(0)
   
2. let endVal = ref(0)
   
3. let numberValue= ref(null)//展示的数字
   
4. let tiemInterval= ref(null)//计时器
   
5. 
   
6. //接口获取展示的数字的值
   
7. const getPueTotalRecharge = (() => {
   
8.    api.getNumberValueApi().then((data) => {
   
9.     numberValue.value = data.resource.number
   
10.    })
    
11.   endVal.value = numberValue.value
    
12. })
    
13. 
    
14. //定时
    
15. timerPueVavlue.value = window.setInterval(() => {
    
16.   getPueTotalRecharge()//pue值
    
17. }, 3000)
    
18. 
    
19. onMounted(() => {
    
20.   getnumberValue()
    
21. })
    
22. 
    
23. onUnmounted(() => {
    
24.     window.clearInterval(tiemInterval.value)
    
25. })
    
26. 
    

复制代码

微信扫一扫，分享更方便