2.0.5 • Published 7 years ago
vcount v2.0.5
Vcount
Install
npm install vcount
Example
<template>
<vcount :start='startValue' :end='endValue' :duration='duration'></vcount>
</template>
<script>
import vcount from 'vcount'
export default {
components: { vcount },
data () {
return {
startValue: 0,
endValue: 2000,
duration:4000
}
}
}
</script>
Usage
Props:
start
: Number the value you want to begin atend
: Number the value you want to arrive atduration
: Number duration in millisecondsdecimal
: String split decimaldecimals
: Number number of decimal places in numberseparator
: String character to use as a separatorprefix
: String optional text before the resultsuffix
: String optional text after the resultuseEasing
: Boolean easing functionwatchValue
: Boolean watch startValue and endValue
Default Options:
<template>
<vcount :start='start' :end='end' :duration='duration' :decimal='decimal' :decimals='decimals' :separator='separator' :prefix='prefix' :suffix='suffix' :useEasing='useEasing' :watchValue='watchValue'></vcount>
</template>
<script>
export default {
data(){
return {
start:0,
end:2000,
duration:4000,
decimal:'.',
decimals:'0',
separator:',',
prefix:'',
suffix:'',
useEasing:true,
watchValue:true
}
}
}
</script>
Methods:
<template>
<vcount ref='child'></vcount>
<span @click='toCallOnComplete'></span>
</template>
<script>
export default {
methods:{
toCallOnComplete(){
this.$refs.child.play(function(){
alert('completed')
})
// or
// this.$refs.child.play(this.completed)
},
completed(){
alert('completed')
}
}
}
</script>
Other Methods:
// Toggle pause/resume
this.$refs.child.pauseResume()
// Reset
this.$refs.child.reset()