CountTo

Count animation is a commonly used component, included in the component library for convenience. The source code is based on vue-count-to, with the same props. Since it only displays numbers, all styles are customizable.

Basic Usage

0

<template>
  <div>
    <b-button type="primary" @click="restart">restart</b-button>
    <div class="mt-15" flex="cross:center">
      <b-tag type="primary" dot font-size="14px">
        <b-count-to ref="countToRef" :start-val="startVal" :end-val="endVal"></b-count-to>
      </b-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const startVal = ref(0)
const endVal = ref(2023)
const countToRef = ref(null)

function restart() {
  countToRef.value?.restart()
}
</script>

Customparameter

Can set different parameters to define duration, prefix, suffix, separator, etc. for the display

0

0.00

0

$0美金

<template>
  <div>
    <b-button type="primary" @click="restart">restart</b-button>
    <div class="mt-15" flex="cross:center">
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo1"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
        ></b-count-to>
      </div>
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo2"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
          :decimals="2"
        ></b-count-to>
      </div>
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo3"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
          separator=""
        ></b-count-to>
      </div>
      <div style="font-size: 18px; color: #1089ff; width: 120px; margin-right: 16px">
        <b-count-to
          ref="countTo4"
          :start-val="startVal"
          :end-val="endVal"
          :duration="3000"
          prefix="$"
          suffix="美金"
        ></b-count-to>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const startVal = ref(0)
const endVal = ref(2023)
const countTo1 = ref(null)
const countTo2 = ref(null)
const countTo3 = ref(null)
const countTo4 = ref(null)

function restart() {
  countTo1.value?.restart()
  countTo2.value?.restart()
  countTo3.value?.restart()
  countTo4.value?.restart()
}
</script>

Props

Parameter	Description	Type	Options	Default
startVal	Start value	Number	—	-
endVal	End value	Number	—	2000
duration	Animation duration	Number	—	2000
autoplay	Whether to auto play	Boolean	—	true
decimals	Decimal precision	Number	—	0
decimal	Decimal point display	String	—	.
separator	Digit separator	String	—	,
prefix	Prefix, character shown before the value	String	—	—
suffix	Suffix, character shown after the value	String	—	—

Events

Event Name	Description	Return Value
mounted	Start render	—
callback	Callback when finished	—

Functions

Event Name	Description	Parameter
count	Get current value	timestamp, time
start	Start	—
pauseResume	Pause and resume	—
reset	Reset	—
restart	Restart	—