vue快速增长数字动画
一、数字自动增长工具
vue-countupjs前身是countup.js用于做数字增长的动画,满足一些展示型数字的使用。
二、使用方法
-
安装vue-countupjs
npm install vue-countupjs --save
-
引入使用
<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/>
-
效果

-
组件属性
属性 |
章义 |
默认值 |
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 |
版权声明:本文为anwen743680原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。