vue-count-to是一个轻量的vue组件,将在指定的持续时间内计数到目标数。
使用方法很简单
首先安装此组件 npm install vue-count-to
再到页面中局部引用组件
1 <template> 2 <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo> 3 </template> 4 5 <script> 6 import countTo from 'vue-count-to'; 7 export default { 8 components: { countTo }, 9 data () { 10 return { 11 startVal: 0, 12 endVal: 2017 13 } 14 } 15 } 16 </script>
其中比较常用的属性就是
startVal => 初始值
endVal => 结束值
duration => 持续时间,毫秒
decimals => 小数位数
还有分隔符separator,小数点decimal,前缀prefix,后缀suffix,值都是字符串类型
最关键的是可以使用缓动函数(easing function),来自定义计数变化的速率。
用useEasing来确定是否开启使用缓动函数,easingFn写入缓动函数。
mountedCallback、start、pause、reset。也都是”人如其名“了。
附上原文档链接:https://github.com/PanJiaChen/vue-countTo
demo链接:vue-count-to
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。