Description:
An animated counter for Vue.js that animates the counting up to a number you specify.
How to use it:
Import Vue and the vue-animated-number component.
import Vue from 'vue' import VueNumber from 'vue-number-animation'
Register the component in your app.
Vue.use(VueNumber)
Create the counter and specify the number you want to count towards to:
<number ref="numberExample" :to="5000" /> <number>
All default props to config the counter.
from: {
type: [Number, String],
default: 0
},
to: {
type: [Number, String],
required: true,
default: 0
},
format: {
type: Function,
default: (num) => parseInt(num)
},
duration: {
type: Number,
default: 1 // Duration of animation in seconds
},
easing: {
type: String,
default: 'Power1.easeOut'
},
delay: {
type: Number,
default: 0 // Delay the animation in seconds
},
animationPaused: Boolean // Stops animation before start
Events.
<number ref="numberExample" :to="5000" @start="startFunc" @complete="completeFunc" @update="updateFunc" /> <number>
API methods.
- play(): starts the counter
- pause(): pauses the counter
- restart(): restarts the counter
Download Details:
Author: nkoik
Live Demo: https://codesandbox.io/s/8256nwlq78
Download Link: https://github.com/nkoik/vue-animated-number/archive/master.zip
Official Website: https://github.com/nkoik/vue-animated-number
Last Update: August 28, 2019
Install:
# NPM
$ npm install vue-number-animation --save
