TCountup / 数字动画

Countup animates number changes with counting effects. Supports easing, duration, prefix/suffix, decimals, and visibility-based start. / 数字动画以滚动计数效果展示数值变化，支持缓动函数、持续时间、前后缀、小数位和可见性触发。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
modelValue	number	100	Target value
start	number	0	Start value
duration	number	2000	Animation duration (ms)
delay	number	0	Start delay (ms)
decimals	number	0	Decimal places
prefix	string	—	Prefix text
suffix	string	—	Suffix text
easing	'linear' | 'easeOutQuad' | 'easeOutCubic'	—	Easing function

Basic Usage / 基础用法

<script setup lang="ts">
import { TCountup } from '@gulcc/tabler-vue'

const value = ref(10000)
</script>

<template>
  <TCountup :model-value="value" :duration="2000" />
  <TCountup :model-value="5000" prefix="¥" suffix="元" decimals="2" />
</template>

Tips / 避坑指南

• Animation auto-plays when the component mounts; update modelValue triggers re-animation
• observeVisibility requires IntersectionObserver support
• Easing options: linear, easeOutQuad (slows at end), easeOutCubic (more pronounced slow-end)