vue数字滚动

1，下载插件依赖

npm install vue-count-to

说明链接：vue-count-to - npm

2，二次封装滚动插件

目的是为了方便多个数字一起滚动。在components下新建组件，父组件通过自定义属性传递数据代码如下：

<template>
  <countTo :startVal='startVal' :endVal='value' :decimals="deci" :duration='3000'></countTo>
</template>
<script>
//直接引入组件'vue-count-to'
  import countTo from 'vue-count-to';
  export default {
  //注册组件
    props:{
      value:{
        type:Number,
        default:0,
      },
      //保留小数位
      deci:{
        type:Number,
        default:0
      }
    },
    components: { countTo },
    data () {
      return {
      //数字开始
        startVal: 0,
       //数字结束
        // endVal: 50000
      }
    }
  }
</script>

3，父组件引用

先import引入组件，在注册组件，完成以后使用组件如下：

<num-scroll :value="tableData.personalCosts"></num-scroll>

该组件自带的属性：

属性	描述	类型	默认
起始值：startVal	您想要开始的值	Number	0
结束值：endVal	你想要结束的值	Number	2017
期间：duration	持续时间（毫秒）	Number	3000
自动播放：autoplay	挂载时自动播放	Boolean	true
小数点：decimals	保留几位小数	Number	0
十进制：decimal	拆分小数	String	.
分隔器：separator	分隔符	String	,
字首：prefix	前缀	String	''
后缀：suffix	后缀	String	''
使用轻松：useEasing	是使用缓动功能	Boolean	true
缓动Fn：easingFn	缓动函数	Function	—