Countdown 倒计时
现在既能可以使用 `Countdown.Value` / `items` 进行静态拼装,也能直接传入目标时间并通过 `format`、`onChange`、`onFinish` 驱动完整倒计时。
# Target Time Countdown
直接传入目标时间戳与 format,组件内部自动计算剩余时间。
::
# Millisecond Precision
包含 S 时会自动切到更高频率刷新,适合展示毫秒级结尾。
:::
# Day Level Format
支持把单位文字写进 format,并自动拆成数字段与纯文本分隔符。
days hours minutes seconds
# Callbacks
onChange 返回剩余毫秒数,onFinish 只在归零时触发一次。
.
最近一次 onChange: 10000 ms
onFinish 状态: 计时中
组合方式
这组示例使用 Rue 组合式写法,用于展示 `Countdown.Value` 与 `items` 的自由排布能力。
# Countdown
# Large Text With 2 Digits
# Clock Countdown
# Countdown 通过数据渲染(数组,组件内部)
items 适合在业务层先拼好数字段与分隔符,再一次性交给 Countdown。
# Clock Countdown With Colons
# Large Text With Labels
days
hours
min
sec
# Large Text With Labels Under
days
hours
min
sec
# In Boxes
days
hours
min
sec
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
className | 追加到 Rue countdown 根节点的视觉类名。 | string | - |
value | 目标时间戳、Date 或可解析时间字符串;传入后启用自动倒计时模式。 | number | string | Date | - |
format | 按常见倒计时组件的格式拆分时间段,支持 `[]` 保持字面量。 | string | HH:mm:ss |
interval | 自定义刷新间隔;含毫秒位时默认约 33ms,否则默认 1000ms。 | number | auto |
ariaLive | 控制自动倒计时模式下每个数值段的播报策略。 | 'polite' | 'off' | 'assertive' | 秒级 polite,毫秒 off |
onChange | 自动倒计时每次刷新时返回剩余毫秒数。 | (remaining?: number) => void | - |
onFinish | 倒计时归零时触发一次。 | () => void | - |
items | 数据驱动的文本/数值混合渲染,适合完全自定义排布。 | CountdownItem[] | - |