npm install vcount<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>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
<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><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()
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent