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

本文主要是介绍数字快速增长动画插件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, // 缓动动画 easinguseGrouping: true, // 1,000,000 vs 1000000separator: ',', // 数字分隔符decimal: '.', // 小数分隔符prefix: '', // 前缀suffix: '' // 后缀
}20648944

这篇关于数字快速增长动画插件vue-countupjs的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！