count-to-v3

vue3 component that will count to a target number at a specified duration

Based on vue-count-to to upgrade components, digital dynamic components

Runtime

The running environment has been tested, vue3.2 vite4.0

Install

npm install count-to-v3 --save
# or
yarn add count-to-v3 --save

Global registration

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import CountTo from 'count-to-v3'
createApp(App).use(CountTo).mount('#app')

Local introduction

<template>
  <CountTo :startVal="0" :endVal="2023" :decimals="2" :separator="','" prefix="$" suffix="usd" />
</template>

<script>
import { CountTo } from 'count-to-v3';

export default {
  components: {
    CountTo
  }
}
</script>

Options

Property	Description	type	default
startVal	the value you want to begin at	Number	0
endVal	the value you want to arrive at	Number	2023
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
mountedCountTo	when mounted will emit mountedCountTo
endCountToCallback	number end of digital scroll emit mountedCallback
start	start the countTo
pause	pause the countTo
reset	reset the countTo