1.0.14 • Published 2 years ago

vue-count-to-plus v1.0.14

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

vue-countTo

It's a vue component that will count to a target number at a specified duration

vue2 Gemnasium license npm npm minified gzip

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:

demo

Use CDN Script: demo

Options

PropertyDescriptiontypedefault
startValthe value you want to begin atNumber0
endValthe value you want to arrive atNumber2017
durationduration in millisecondNumber3000
looploop in timeNumber/Booleanfalse
autoplaywhen mounted autoplayBooleantrue
decimalsthe number of decimal places to showNumber0
decimalthe split decimalString.
separatorthe separatorString,
prefixthe prefixString''
suffixthe suffixString''
useEasingis use easing functionBooleantrue
easingFnthe easing functionFunction

notes: when autoplay:true , it will auto start when startVal or endVal change

Functions

Function NameDescription
mountedCallbackwhen mounted will emit mountedCallback
startstart the countTo
pausepause the countTo
resetreset the countTo