组件功能
倒计时组件,用于显示剩余时间,支持自定义样式和完成回调。
基础用法
通过 duration 设置总时长,prefix 和 suffix 可定制显示文本。
Template 示例:
<Countdown duration={60} prefix="剩余时间: " suffix=" 秒" />
效果展示如下:


属性说明
属性名 | 类型 | 描述 | 默认值 |
duration ★ | number | 倒计时总时长 (秒) | - |
prefix | string | 倒计时前缀文本 | - |
suffix | string | 倒计时后缀文本 | - |
size | "xs" | "sm" | "md" | "lg" | "xl" | 组件尺寸 (与 Text 对齐) | "md" |
color | string | ThemeColor | 文本颜色 | - |
onComplete | ActionConfig | 倒计时结束时触发的动作 | - |
注意:
★ 标记为必填属性。
颜色配置
color 属性支持以下类型:Text color tokens,例如
"text-primary", "text-secondary"。Primitive color tokens,例如
"blue-500", "red-600"。CSS 颜色字符串,例如
"#FF0000", "rgb(255, 0, 0)"。Theme-aware 对象,
{ "light": "#000000", "dark": "#FFFFFF" }。使用示例
JSON 格式:
{"type": "Card","children": [{ "type": "Title", "value": "限时优惠" },{"type": "Countdown","duration": 3600,"prefix": "活动结束倒计时: ","size": "lg","color": { "light": "#E34D59", "dark": "#F66F6A" },"onComplete": {"type": "show_message","payload": { "message": "活动已结束" }}}]}
效果展示如下:


显示格式
倒计时会根据剩余时间自动调整显示内容:
少于 1 分钟:仅显示秒数,例如 59 秒。
少于 1 小时:显示分钟和秒数,例如 12 分 30 秒。
1 小时以上:显示小时、分钟和秒数,例如 1 时 15 分 20 秒。