数字滚动 CountTo

一个数字滚动动画组件，常用于数据面板、统计卡片等场景的数值展示。

基础使用

通过 to 属性设置目标数值，CountTo 在挂载后会自动从 from（默认 0）滚动到 to。使用 duration 属性可以设置动画时长，使用 precision 属性可以设置小数位数。

Default:0

1.5s:0

Precision:0.00

隐藏源代码

格式化

通过 separator 属性开启千分位分隔，formatter 属性可以完全自定义数值的显示格式，例如添加单位或货币符号。

Separator:0

Separator + precision:0.00

Formatter:$0.00

隐藏源代码

延迟启动

使用 startDelay 属性可以让 CountTo 在挂载后延迟指定时间再开始滚动动画。

Start after 1.5s:0

隐藏源代码

手动控制

通过 autoplay 属性可以控制滚动是否自动开始。CountTo 还暴露 start、pause、resume、reset 方法，便于手动控制滚动过程：start 从头开始滚动，pause 暂停当前滚动，resume 从暂停处继续，reset 根据属性状态重置并视 autoplay 决定是否自动继续。

0

隐藏源代码

响应式更新

当 to 属性发生变化时，CountTo 会从当前显示的数值滚动到新的目标值；若 autoplay 为 false，则会直接更新为新的目标值。

0

隐藏源代码

自定义内容

CountTo 提供 default 插槽来自定义数值的渲染，接收当前显示的文本 text 和数值 value。

Custom slot: Score: 0 (0)

With progress color:0%

隐藏源代码

API

CountToProps

属性	类型	可选	默认值	描述	版本
to	number	否		CountTo 动画的目标数值。	0.2.0
from	number	是		CountTo 动画的起始数值。	0.2.0
duration	number	是	1000	CountTo 动画的时长（毫秒）。	0.2.0
precision	number	是	0	CountTo 显示数值保留的小数位数。	0.2.0
startDelay	number	是	0	CountTo 开始动画前的延迟时间。	0.2.0
autoplay	boolean	是	true	CountTo 是否在挂载后自动开始动画。	0.2.0
separator	boolean	是	false	是否开启千分位分隔。	0.2.0
formatter	(value: number) => string	是		CountTo 的自定义格式化函数。	0.2.0

CountToEvents

事件	参数	描述	版本
start		CountTo 开始动画时触发。	0.2.0
end		CountTo 动画结束时触发。	0.2.0

CountToSlots

插槽	参数	描述	版本
default	text: string, value: number	自定义 CountTo 的数值渲染。	0.2.0

CountToExpose

属性	类型	可选	默认值	描述	版本
start	() => void	否		（重新）开始 CountTo 的滚动动画。	0.2.0
pause	() => void	否		暂停 CountTo 的滚动动画。	0.2.0
resume	() => void	否		恢复 CountTo 被打断的滚动动画。	0.2.0
reset	() => void	否		重置 CountTo 的滚动状态。	0.2.0