Automatic Counter For Vue 3 – Autocounter

Description:

An animated automatic counter for counting up & down. Built with TypeScript.

How to use it:

1. Import the component.

// Global
import { createApp } from 'vue';
import Vue3Autocounter from 'vue3-autocounter';
import App from './App.vue';
createApp(App)
.component('vue3-autocounter', Vue3Autocounter)
.mount('#app');
 
// Local
import { defineComponent } from 'vue';
import Vue3autocounter from 'vue3-autocounter';
export default defineComponent({
  name: 'Demo',
  components: {
    'vue3-autocounter': Vue3autocounter
  }
});

2. Use the counter in your template:

<vue3-autocounter ref='counter' :startAmount='0' :endAmount='2021' />

3. Available component props.

startAmount: {
  type: Number,
  default: 0
},
endAmount: {
  type: Number,
  default: 0,
  required: true
},
duration: {
  type: Number,
  default: 3,
  validator(duration: number): boolean {
    return duration >= 1;
  }
},
autoinit: {
  type: Boolean,
  default: true
},
prefix: {
  type: String,
  default: ''
},
suffix: {
  type: String,
  default: ''
},
separator: {
  type: String,
  default: ','
},
decimalSeparator: {
  type: String,
  default: '.'
},
decimals: {
  type: Number,
  default: 0,
  validator(decimals: number): boolean {
    return decimals >= 0;
  }
}

4. API methods.

  • start()
  • pause()
  • resume()
  • reset()

5. Trigger a function when the counter is finished.

<vue3-autocounter ref='counter' :startAmount='0' :endAmount='2021'  @finished='alert(`Counting finished!`)' />

Preview:

Automatic Counter For Vue 3 - Autocounter

Download Details:

Author: ps-cristopher

Live Demo: https://vue3autocounter.cristopherps.dev/

Download Link: https://github.com/ps-cristopher/vue3-autocounter/archive/refs/heads/master.zip

Official Website: https://github.com/ps-cristopher/vue3-autocounter

Install & Download:

# NPM
$ npm i vue3-autocounter

You Might Be Interested In:

Tags:

Add Comment