vue-count-to实现数字滚动效果

1、如何下载

直接在npm安装到项目中

 npm install vue-count-to

2、相关配置参数

属性	描述	类型	默认值
statrVal	开始值	Number	0
endVal	结束值	Number	2017
duration	持续时间，单位毫秒	Number	3000
autoplay	自动播放，true的时候，如果开始值or结束值发生变化，会自动调用start()函数，来让数据滚动	Boolean	true
decimals	小数位	Number	0
decimal	十进制分割	String	.
separator	分隔符	String	,
prefix	前缀符（如数字123，设置‘￥’，则显示为￥123）	String	''
suffix	后缀符	String	''
useEasing	使用缓和功能	Boolean	true
easingFn	缓和回调	Function	-

可以看到，vue-count-to属性比countup.js少了一些，但已经把常用的核心部分属性抽了出来，并且额外增加了一个autoplay的属性，方便双向绑定的使用，而不用每次更新数据自己去调用start()方法。

3、相关功能函数

函数名	描述
mountedCallback	挂载以后返回回调
start	开始计数
pause	暂停计数
reset	重置countTo

4、如何在项目中使用

a、引入，这里是作为组件引入，而不是引入函数方法

import CountTo from'vue-count-to'
export default {
  components: {
    CountTo
  },
}
data() {
    return {
      startVal: 2000,
      endVal: 5000,
    };
  },

b、使用CountTo生成元素

// 这里是绑定了开始和结束值，持续时间2秒，小数位2
<CountTo ref="refcountofore" :start-val="startVal" :end-val="endVal" :duration="2000" :decimals="2"></CountTo>

c、设置ref的目的

有时数值并没有改变，但为了造成数据是有更新的情况，就仍需要有滚动的效果出现，这个时候可以通过ref找到该元素，然后调用方法滚动。

const refname = 'refcountofore'if (this.$refs[refname]) { // 判空this.$refs[refname].reset() // 重置this.$refs[refname].start() // 开始滚动
}