1.0.2 • Published 10 months ago

vue-count-to-array v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

vue-count-to-array

vue-count-to-array is a modification of vue-count-to that is fully compatible with all the functionalities of vue-count-to. In most cases, you only need to replace the dependency package to use it. For example, instead of importing countTo from “vue-count-to”, you can import it from “vue-count-to-array” to replace it completely.

A new property called showByArray has been added, which allows you to display the numbers as an array instead of a single value. This enables you to apply different styles to each number to meet the UI requirements.

How to use?

npm install vue-count-to-array

Example

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000' :showByArray='true'></countTo>
</template>
 
<script>
  import countTo from 'vue-count-to-array';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
</script>

Options

PropertyDescriptiontypedefault
startValthe value you want to begin atNumber0
endValthe value you want to arrive atNumber2017
durationduration in millisecondNumber3000
autoplaywhen mounted autoplayBooleantrue
decimalsthe number of decimal places to showNumber0
decimalthe split decimalString.
separatorthe separatorString,
showByArrayThe flag indicating whether to display as an array mode.Booleanfalse
prefixthe prefixString''
suffixthe suffixString''
useEasingis use easing functionBoolean true
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