vcount

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 at
• end: Number
  the value you want to arrive at
• duration: Number
  duration in milliseconds
• decimal: String
  split decimal
• decimals: Number
  number of decimal places in number
• separator: String
  character to use as a separator
• prefix: String
  optional text before the result
• suffix: String
  optional text after the result
• useEasing: Boolean
  easing function
• watchValue: 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()

License

MIT