iter(g234): 新增 pinInput 验证码输入组件,N 格数字输入支持进格回删移格与粘贴分发(71 组件)
This commit is contained in:
+46
-2
@@ -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 支持布尔或信号禁用"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user