Countdown 倒计时

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

倒计时组件,用于显示剩余时间,支持自定义样式和完成回调。

基础用法

通过 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 秒。