https://github.com/panjiachen/vue-countto

It's a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/
https://github.com/panjiachen/vue-countto

countup vue vue-component

Last synced: 2 months ago
JSON representation

It's a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/

• Host: GitHub
• URL: https://github.com/panjiachen/vue-countto
• Owner: PanJiaChen
• Created: 2017-04-13T08:52:51.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-02-22T02:20:36.000Z (over 2 years ago)
• Last Synced: 2025-05-15T10:05:14.291Z (2 months ago)
• Topics: countup, vue, vue-component
• Language: JavaScript
• Homepage:
• Size: 362 KB
• Stars: 1,488
• Watchers: 19
• Forks: 316
• Open Issues: 36
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-countTo

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

 [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

 [![Gemnasium](https://img.shields.io/gemnasium/mathiasbynens/he.svg)](https://github.com/PanJiaChen/vue-countTo)

 [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-countTo)

 [![npm](https://img.shields.io/npm/v/vue-count-to.svg)](https://www.npmjs.com/package/vue-count-to)

 [![npm](https://img.shields.io/npm/dm/vue-count-to.svg)](https://npmcharts.com/compare/vue-count-to)

 [![minified](https://badgen.net/bundlephobia/min/vue-count-to)](https://bundlephobia.com/result?p=vue-count-to)

 [![gzip](https://badgen.net/bundlephobia/minzip/vue-count-to)](https://bundlephobia.com/result?p=vue-count-to)

vue-countTo 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 countUp.js;

## [Try the demo](http://panjiachen.github.io/countTo/demo/)

### How to use?

```bash

npm install vue-count-to

```

### Example

```vue

  

  import countTo from 'vue-count-to';

  export default {

    components: { countTo },

    data () {

      return {

        startVal: 0,

        endVal: 2017

      }

    }

  }

```

demo:

![demo](https://github.com/PanJiaChen/vue-countTo/blob/master/countDemo.gif)

Use CDN Script: [demo](https://github.com/PanJiaChen/vue-countTo/blob/master/demo/index.html)

### Options

|    Property    |    Description   |   type   |	default	|

| -----------------  | ---------------- | :--------: | :----------: |

| startVal       | the value you want to begin at |Number| 0 |

| endVal         | the value you want to arrive at |Number | 2017 |

| duration  | duration in millisecond | Number | 3000 |

| autoplay     | when mounted autoplay | Boolean | true |

| decimals     | the number of decimal places to show | Number | 0 |

| decimal     | the split decimal | String | . |

| separator     | the separator | String | , |

| prefix     | the prefix | String | '' |

| suffix     | the suffix | String | '' |

| useEasing     | is use easing function | Boolean | true |

| easingFn     | the easing function | Function | — |

** notes: when autoplay:true , it will auto start when startVal or endVal change **

### Functions

| Function Name | Description   |

| :--------:   | -----  |

|    mountedCallback    |  when mounted will emit  mountedCallback  |

|    start    |  start the countTo  |

|    pause   |  pause  the countTo |

|    reset    |  reset  the countTo |