vue快速增长数字动画

一、数字自动增长工具

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

二、使用方法

  1. 安装vue-countupjs

npm install vue-countupjs --save
  1. 引入使用

<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/>
  1. 效果

  1. 组件属性

属性

章义

默认值

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 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>