vue项目数字滚动插件-animate-number 的使用animate-number数字滚动插件安装 main.j

安装

npm install vue-animate-number

main.js引入：


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

内置方法：

from: 开始使用动画的数字；number;(必填项)

to：结束的动画数字；number;(必填项)

duration: 动画速度：number;

formatter方法（格式化数字）：小数点后后边保留几位小数；

animateEnd:动画结束时的回调函数

fromColor：动画开始时候的颜色

toColor: 动画结束时候的颜色

代码实现：

<template>
  <div style="width: 100%;background-color: #000080;">
    <animate-number duration="800" from="0" :to="errorCount" :formatter="formatter" ref="errorCount"  :key="errorCount" ></animate-number>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data(){
  errorCount:20, // 绑定ref和key，接口拿到的数据可以直接赋值；
  },
  methods: {
    formatter: function (num) {
      return num.toFixed(5) //小数点后几位，数字就是几小数点后几位
    },
    startAnimate: function () {
      this.$refs.myNum.start()
    }
  }
}
</script>