v-count-up

It's a vue component that will count to a target number at a specified duration

v-count-up is a dependency-free, lightweight vue component that can be overwrited easingFn by yourself. You can set startVal and endVal ,it will automatic judge count up or count down. It is support vue-ssr. It is learn from [email protected];

How to use?

npm install @yangzhiwei/v-count-up

Example

<template>
  <v-count-up :ev="endVal" :opts="opts"></v-count-up>
</template>

<script>
  import VCountUp from '@yangzhiwe/v-count-up';
  export default {
    components: { VCountUp },
    data () {
      return {
        endVal: 2019,
        opts: {
          startVal: 1000
        }
      }
    }
  }
</script>

Params

| Property | Description | type | default | | ----------------- | ---------------- | :--------: | :----------: | | endVal | the value you want to arrive at |Number| 0 | | options? | optional configuration object for fine-grain control |Object| null |

Options

| Property | Description | type | default | | ----------------- | ---------------- | :--------: | :----------: | | startVal | number to start at (0) |Number| 0 | | decimalPlaces | number of decimal places (0) |Number | 0 | | duration | animation duration in seconds (2) |Number | 2 | | useGrouping | example: 1,000 vs 1000 (true) |Boolean | true | | useEasing | ease animation (true) |Boolean | true | | smartEasingThreshold | smooth easing for large numbers above this if useEasing (999) |Number | 999 | | smartEasingAmount | amount to be eased for numbers above threshold (333) |Number | 333 | | separator | grouping separator (',') |String | , | | decimal | decimal ('.') |String | . | | easingFn | easingFn: easing function for animation (easeOutExpo) |Function(t: number, b: number, c: number, d: number) => number | - | | formattingFn | this function formats result |Function(n: number) => string | - | | prefix | text prepended to result |String | '' | | suffix | text appended to result |String | '' | | numerals | numeral glyph substitution |string[] | [] | | autoplay | when mounted autoplay |Boolean | true |

** notes: when autoplay:true , it will auto start **

Functions

| Function Name | Description | | :--------: | ----- | | mountedCallback | when mounted will emit mountedCallback | | start | start the v-count-up | | pauseResume | Toggle pause/resume | | reset | Reset the animation | | update | Update the end value and animate |