产品动态
产品公告
Countdown 倒计时
组件功能
倒计时组件，用于显示剩余时间，支持自定义样式和完成回调。
基础用法
通过 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" }。使用示例
Template 示例：
<Card><Title value="限时优惠" /><Countdownduration={3600}prefix="活动结束倒计时: "size="lg"color={{ light: "#E34D59", dark: "#F66F6A" }}onComplete={{type: "show_message",payload: { message: "活动已结束" }}}/></Card>
效果展示如下：
显示格式
倒计时会根据剩余时间自动调整显示内容：
少于 1 分钟：仅显示秒数，例如 59 秒。
少于 1 小时：显示分钟和秒数，例如 12 分 30 秒。
1 小时以上：显示小时、分钟和秒数，例如 1 时 15 分 20 秒。
文档反馈