腾讯云智能体开发平台 Countdown 倒计时

这篇说说腾讯云倒计时组件的功能、属性配置与使用示例,支持自定义时长、文本、尺寸、颜色及完成回调,时间显示自动适配秒、分钟或小时格式。 属性说明:duration为必填,支持prefix/suffix文本定制,color可配置主题色或CSS值。 显示格式:少于1分钟仅显示秒,1小时以上显示时分秒。

相关产品
腾讯云智能体开发平台 产品页,含版本规格、价格与购买入口。

一、组件功能

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

二、基础用法

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

赞 (0)
上一篇 4天前
下一篇 4天前