iter(g236): 新增 countdown 倒计时组件,秒级递减自动停表并带句柄控制(73 组件)

This commit is contained in:
HIsheR
2026-10-26 21:28:56 +08:00
parent 671c87456e
commit d50455318d
12 changed files with 176 additions and 10 deletions
+26 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T13:25:25.456Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T13:28:41.290Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -2073,6 +2073,30 @@ copyButton({ text: 'npm install @ui-arch/ui', onCopied: (t) => console.log(t) })
现场演示:apps/docs/demo.html#sec-copybutton
### countdown — 倒计时 Countdown
参数:
- seconds(必填):number —— 总时长(秒),> 0
- running(默认 true):boolean —— 创建即开始倒数;传 false 用句柄 start 手动启动
- format:(seconds: number) => string —— 展示格式化;缺省 mm:ss 两位补零
- onFinish(回调):() => void —— 归零回调(自动停表后触发)
示例:
```
const cd = countdown({ seconds: 60, onFinish: () => console.log('结束') }); // cd.start / stop / reset
```
手把手:
1. 传 seconds 即可用,缺省挂载即开始、mm:ss 展示;返回句柄 { el, start, stop, reset }
2. running: false 先摆好再手动 start,典型场景是「发送验证码」后才开始 60s 重发倒计时
3. 归零自动停表并触发 onFinish;之后 start() 会重开一轮,reset() 复位到总时长
4. format 自定义展示:如只显示秒 (s) => `${s}s`,或带上小时位
现场演示:apps/docs/demo.html#sec-countdown
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -2149,6 +2173,7 @@ API 速览:
- timePicker(props):时间选择,时 / 分两列弹层,value 信号双向绑定 HH:mm,分钟可配步长,Esc 收起
- pinInput(props):验证码输入,N 格单字符数字输入,输入自动进格、退格回删、方向键移格、粘贴自动分发,value 信号双向绑定,mask 可密文显示
- copyButton(props):复制按钮,点击把 text 写入剪贴板并短暂显示已复制,text 可传函数取实时值,clipboard API 不可用时降级 execCommand
- countdown(props):倒计时,秒级递减到 0 自动停表并触发 onFinish,缺省 mm:ss 展示,返回句柄 start/stop/reset
一行用法: