vue-simple-countup

用vue简单封装的 CountUp.js。Vue.js component wrap for CountUp.js

简单易用、追踪了目标值变化、添加自动启动； 支持 CountUp.js 的大部分选项。

Installation

$ npm install --save vue-simple-countup

Usage

<simple-count-up ref="myCountUp" v-modle.number="endVal" :auto="!0"></simple-count-up>

import Vue from 'vue';
import SimpleCountUp from 'vue-simple-countup';
Vue.component(SimpleCountUp.name, SimpleCountUp);

export default {
  name: 'app',
  computed: {
    simpleCountUp() {
      return this.$refs.myCountUp;
    }
  },
  data() {
    return {
      endVal: 5555
    }
  },
  methods: {
    handleClick() {
      // start where you want
      this.simpleCountUp.start();
    }
  }
}

Options

| Property | Description | type | default | | ----------------- | ---------------- | :--------: | :----------: | | v-model | value | Number | required | | auto | autostart | Boolean | false |

more options see countUp.js#Options

Not Support Options

| Property | Description | | ----------------- | ---------------- | | smartEasingThreshold | not support | | smartEasingAmount | not support | | easingFn | not support | | formattingFn | not support | | numerals | not support |

Methods

| Method Name | Description | Example | | :--------: | ----- | ----- | | start | start the countUp | simpleCountUp.start(completeMethod) | | pauseResume | pause/resume the countUp | simpleCountUp.pauseResume() | | update | update value | simpleCountUp.update(6666) | | reset | reset the countUp | simpleCountUp.reset() |