242417d45d | ||
---|---|---|
.. | ||
demo | ||
dist | ||
src | ||
.babelrc | ||
.eslintignore | ||
.eslintrc.js | ||
README.md | ||
countDemo.gif | ||
package.json | ||
webpack.config.js |
README.md
vue-countTo
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
How to use?
npm install vue-count-to
Example
<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
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 |