关于vue-count-to的使用

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  => 持续时间，毫秒

autoplay => 是否自动开始，布尔值

decimals => 小数位数

还有分隔符separator，小数点decimal，前缀prefix，后缀suffix，值都是字符串类型

最关键的是可以使用缓动函数(easing function)，来自定义计数变化的速率。

用useEasing来确定是否开启使用缓动函数，easingFn写入缓动函数。

此外，还有四个自带的方法。

mountedCallback、start、pause、reset。也都是”人如其名“了。

附上原文档链接：https://github.com/PanJiaChen/vue-countTo

demo链接：vue-count-to

标签：count,vue,endVal,缓动,关于,组件,countTo
来源： https://www.cnblogs.com/MingYX/p/16359189.html