数字快速增长动画插件vue-countupjs

使用场景：

①页面加载时实现数字从0开始滚到指定数字

②大屏数字的滚动增长

1.安装vue-countupjs

npm install vue-countupjs --save复制

2.使用

①全局使用

main.js引入

import VueCountUp from 'vue-countupjs'
Vue.use(VueCountUp)
Vue.component('VueCountUp', VueCountUp) //全局注册组件复制

在组件中直接使用：

<div style="color: #b72830;font-size: 50px">数字：<VueCountUp :start-value="0" :end-value="num" :duration="5" :decimals="1" :options="options"/></div>复制

 ②局部使用

在需要用到的组件里引入：

<template>
	<div>
		<VueCountUp :start-value="0" :end-value="num" :duration="1"/>
	</div>
</template>
<script>
import VueCountUp from 'vue-countupjs' //引入
export default {
	components: { VueCountUp },
    data(){
        return{
            num:80,    
        } 
    }
}
<script/>复制

3.参数介绍

  属性                                意义                                      默认值
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

options：{
  useEasing: true, // 缓动动画 easing
  useGrouping: true, // 1,000,000 vs 1000000
  separator: ',', // 数字分隔符
  decimal: '.', // 小数分隔符
  prefix: '', // 前缀
  suffix: '' // 后缀
}20648944复制