数字滚动插件————vue-animate-number

数字滚动插件————vue-animate-number

安装方式：

npm install vue-animate-number

在vue中引用

import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)

例子代码

<template>
  <div style="width: 100%;background-color: #000080;">
  <animate-number from="1" to="1000" duration="2000"  :formatter="formatter"
      ></animate-number>
      <!-- parseInt as default formatter -->
      <animate-number from="1" to="100000" duration="3000"></animate-number>
      <!-- manually start animation by click -->
      <animate-number ref="myNum" from="0" to="10" mode="manual" :formatter="formatter"></animate-number><br>
      <button type="button" @click="startAnimate()"> animate! </button>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  methods: {
    formatter: function (num) {
      return num.toFixed(5) //小数点后几位，数字就是几小数点后几位
    },
    startAnimate: function () {
      this.$refs.myNum.start()
    }
  }
}
</script>

属性以及方法

mode:模式auto和manual auto为自动开始动画，manual为之后开始
from: 数字从多少开始
to:到多少数字结束（即目标数字）
fromColor：动画开始时候的颜色
toColor: 动画结束时候的颜色
formatter：格式化程序，动画过程中每个步骤中的数字值格式化程序，返回值为数字
animateEnd:动画结束时的回调函数