vue-count-to-array
v1.0.2
Published
It's a vue component that will count to a target number at a specified duration by array
Downloads
5
Readme
vue-count-to-array
vue-count-to-array is a modification of vue-count-to that is fully compatible with all the functionalities of vue-count-to. In most cases, you only need to replace the dependency package to use it. For example, instead of importing countTo from “vue-count-to”, you can import it from “vue-count-to-array” to replace it completely.
A new property called showByArray has been added, which allows you to display the numbers as an array instead of a single value. This enables you to apply different styles to each number to meet the UI requirements.
How to use?
npm install vue-count-to-array
Example
<template>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000' :showByArray='true'></countTo>
</template>
<script>
import countTo from 'vue-count-to-array';
export default {
components: { countTo },
data () {
return {
startVal: 0,
endVal: 2017
}
}
}
</script>
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 |,| |showByArray |The flag indicating whether to display as an array mode. |Boolean| false| |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|