iter(g234): 新增 pinInput 验证码输入组件,N 格数字输入支持进格回删移格与粘贴分发(71 组件)

This commit is contained in:
HIsheR
2026-10-26 21:22:57 +08:00
parent 45e56d06bb
commit 8740ab02a9
12 changed files with 232 additions and 10 deletions
+27 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T13:15:52.353Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T13:22:26.722Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -2021,6 +2021,31 @@ const at = signal('09:30'); timePicker({ value: at, minuteStep: 15, onChange: (t
现场演示:apps/docs/demo.html#sec-timepicker
### pinInput — 验证码输入 PinInput
参数:
- value(必填):Signal<string> —— 当前验证码(数字拼接串)信号,双向绑定:格子输入写回、外部赋值同步回格子
- length(默认 6):number —— 格数;缺省 6
- mask(默认 false):boolean —— 密文显示(type=password,并声明 one-time-code 便于短信验证码自动填充);缺省明文
- disabled:boolean | Signal<boolean> —— 禁用态:布尔直接置位,传信号则动态同步
- onChange(回调):(value: string) => void —— 任一格变化回调(参数为当前已输入拼接串)
示例:
```
const code = signal(''); pinInput({ value: code, length: 6, onChange: (v) => console.log(v) })
```
手把手:
1. 用 signal('') 创建验证码信号并传入 value;拼接串随输入实时更新,长度满格即验证码就绪
2. 输入一位自动进下一格;退格在本格为空时回删上一格;←/→ 在格间移动;聚焦即全选,直接敲键覆盖
3. 粘贴会自动分发:整段验证码(位数 ≥ 格数)从首格铺起,零散片段从当前格续填
4. mask: true 走密文显示并声明 one-time-code,短信验证码可自动填充;disabled 支持布尔或信号禁用
现场演示:apps/docs/demo.html#sec-pininput
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -2095,6 +2120,7 @@ API 速览:
- virtualList(props):虚拟列表,固定行高长列表只渲染可视窗口 + 上下缓冲条,万级数据滚动不随总量掉帧;返回 { el, scrollTo } 句柄
- commandPalette(props):命令面板,⌘K / Ctrl+K 唤起,输入即过滤(主文案/说明/关键词三层),↑↓ 环形选择 + 回车执行 + Esc 收起,选中与关闭都归还焦点;返回 { el, open, close } 句柄
- timePicker(props):时间选择,时 / 分两列弹层,value 信号双向绑定 HH:mm,分钟可配步长,Esc 收起
- pinInput(props):验证码输入,N 格单字符数字输入,输入自动进格、退格回删、方向键移格、粘贴自动分发,value 信号双向绑定,mask 可密文显示
一行用法: