aaac7fed
 liuqimichale
add
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
# vue-countTo [](https://vuejs.org/) [](https://github.com/PanJiaChen/vue-countTo) [](https://github.com/PanJiaChen/vue-countTo) [](https://www.npmjs.com/package/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
<template>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
data () {
return {
startVal: 0,
endVal: 2017
}
}
}
</script>
```
demo:
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 |
|
