一、组件功能
倒计时组件,用于显示剩余时间,支持自定义样式和完成回调。
二、基础用法
通过 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="限时优惠" /> <Countdown duration={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 秒。