数字滚动插件 vue-countup-v2 的使用

CountUp.js 是一个无依赖、轻量级的 Javascript 类，可用于快速创建以更有趣的方式显示数字数据的动画。

官网: CountUp.js

示例:

 

执行命令安装

npm install --save countup.js vue-countup-v2

 

 在实例中使用  关键代码

<ICountUp
        :delay="delay"
        :endVal="endVal"
        :options="options"
        @ready="onReady"
      />

import ICountUp from 'vue-countup-v2'

export default {
  components: {
    ICountUp
  },
  data () {
    return {
      delay: 1000,
      endVal: 666,
      options: {
        startVal: 100,
        duration: 10,
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '总计',
        suffix: '元'
      }
    }
  },
 methods: {
    onReady: function (instance, CountUp) {
      const that = this
      instance.update(that.endVal)
    },
}
}

属性

delay: 延迟多少毫秒开始 

 endVal: 设置结束的值

options：配置项

startVal ：开始时的值

duration: 持续多久 单位是秒

useGrouping: 逗号分割

详细见官网：

结果