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
+46 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T13:15:52.353Z",
"generatedAt": "2026-10-26T13:22:26.722Z",
"repoRoot": ".",
"packages": [
{
@@ -213,7 +213,8 @@
"avatarGroup(props):头像组,横向叠放并在超出 max 时折叠成 +N,整组 title 列出全部姓名",
"virtualList(props):虚拟列表,固定行高长列表只渲染可视窗口 + 上下缓冲条,万级数据滚动不随总量掉帧;返回 { el, scrollTo } 句柄",
"commandPalette(props):命令面板,⌘K / Ctrl+K 唤起,输入即过滤(主文案/说明/关键词三层),↑↓ 环形选择 + 回车执行 + Esc 收起,选中与关闭都归还焦点;返回 { el, open, close } 句柄",
"timePicker(props):时间选择,时 / 分两列弹层,value 信号双向绑定 HH:mm,分钟可配步长,Esc 收起"
"timePicker(props):时间选择,时 / 分两列弹层,value 信号双向绑定 HH:mm,分钟可配步长,Esc 收起",
"pinInput(props):验证码输入,N 格单字符数字输入,输入自动进格、退格回删、方向键移格、粘贴自动分发,value 信号双向绑定,mask 可密文显示"
],
"keyTypes": [
"ButtonProps",
@@ -3837,6 +3838,49 @@
"收起态键盘微调:聚焦触发器按 ↑↓ 按步长加减(12:30 步长 15 → 12:45),Shift + ↑↓ 按小时加减,跨 00:00 / 23:xx 自动环形;改完同样触发 onChange",
"打开弹层后焦点直接落在时列当前格(键盘用户不必再 Tab 找):列内 ↑↓ 立即生效,Esc 收起后焦点回到触发器"
]
},
{
"id": "pinInput",
"title": "验证码输入 PinInput",
"demo": "sec-pininput",
"props": [
{
"n": "value",
"t": "Signal<string>",
"r": 1,
"d": "当前验证码(数字拼接串)信号,双向绑定:格子输入写回、外部赋值同步回格子"
},
{
"n": "length",
"t": "number",
"df": "6",
"d": "格数;缺省 6"
},
{
"n": "mask",
"t": "boolean",
"df": "false",
"d": "密文显示(type=password,并声明 one-time-code 便于短信验证码自动填充);缺省明文"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
"d": "禁用态:布尔直接置位,传信号则动态同步"
},
{
"n": "onChange",
"t": "(value: string) => void",
"k": 1,
"d": "任一格变化回调(参数为当前已输入拼接串)"
}
],
"example": "const code = signal(''); pinInput({ value: code, length: 6, onChange: (v) => console.log(v) })",
"steps": [
"用 signal('') 创建验证码信号并传入 value;拼接串随输入实时更新,长度满格即验证码就绪",
"输入一位自动进下一格;退格在本格为空时回删上一格;←/→ 在格间移动;聚焦即全选,直接敲键覆盖",
"粘贴会自动分发:整段验证码(位数 ≥ 格数)从首格铺起,零散片段从当前格续填",
"mask: true 走密文显示并声明 one-time-code,短信验证码可自动填充;disabled 支持布尔或信号禁用"
]
}
]
},