vue快速增长数字动画

一、数字自动增长工具

vue-countupjs前身是countup.js用于做数字增长的动画，满足一些展示型数字的使用。

二、使用方法

1. 安装vue-countupjs

npm install vue-countupjs --save

2. 引入使用

<template>
    <div>
        <VueCountUp :start-value="0" :end-value="cardList.agingNum" :duration="2"/>
    </div>
</template>
<script>
import VueCountUp from 'vue-countupjs' 
export default {
    components: { VueCountUp }
}
<script/>

3. 效果

4. 组件属性

属性	章义	默认值
tag	数字的包装器	span
startValue	起始值	0
endValue	结束值	0
decimals	小数位数， 默认为 0	0
duration	动画持续时间， 默认为 2 s	2
delay	延时更新时间, 0 为不延时	0
immediate	是否立即执行动画	true
options	countup配置项	下图代码
animateClass	执行期间动画, 执行后删除，优先级低于animatedClass	null
animatedClass	执行前插入, 执行后删除	animated