标签：count vue endVal 缓动 关于 组件 countTo

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。