仅桌面端保证样式
Countdown 倒计时
目标时刻倒计时,到点自动停在零值并触发 finish 事件,适合秒杀开始、订单支付剩余时间、活动截止提醒等场景。与 Statistic 同族排版,可直接并排使用。
基础用法
value 传目标时刻(Date、时间戳或可解析的日期字符串),组件自动走秒:
距秒杀开始
01:00:00
支付剩余时间
00:14:59
距活动截止
47:59:59
格式与前后缀
format 令牌:HH 总小时(可超过 24)、mm 分、ss 秒,其余字符原样输出;prefix / suffix 适合「还剩 / 截止」类提示语:
还剩29 分 59 秒
25 小时 59 分
00:59:59后截止
结束事件与重置
到点触发 finish;运行中每次走秒触发 change(载荷为剩余毫秒)。改 value 即重新计时:
00:00:09
Countdown Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 目标时刻(Date / 时间戳 / dayjs 可解析字符串);已过去则直接零值 | date | string | number | — |
| format | 展示格式:HH 总小时(可超过 24)、mm 分、ss 秒,其余字符原样 | string | HH:mm:ss |
| title | 标题 | string | |
| prefix | 数值前缀 | string | |
| suffix | 数值后缀 | string | |
| valueStyle | 数值区样式(字号/颜色等) | object | — |
Countdown Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| finish | 倒计时归零时触发 | — | — |
| change | 走秒时触发,载荷为剩余毫秒数 | number | — |
Countdown Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 自定义标题区 | — | — |
| prefix | 自定义前缀区 | — | — |
| suffix | 自定义后缀区 | — | — |