Skip to content
It's a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/
JavaScript Vue
Branch: master
Clone or download
Latest commit 970b9b1 Nov 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Change year in demo (#13) May 7, 2018
dist [release] 1.0.11 Sep 5, 2017
src update Dec 8, 2017
.babelrc update Apr 15, 2017
.eslintignore init Apr 13, 2017
.eslintrc.js init Apr 13, 2017
.gitignore ignore package-lock.json Dec 8, 2017
README.md tweak doc Nov 29, 2018
countDemo.gif update Apr 16, 2017
package.json tweak doc Nov 29, 2018
webpack.config.js update Apr 15, 2017

README.md

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

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 ,
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
You can’t perform that action at this time.