iter(g234): 新增 pinInput 验证码输入组件，N 格数字输入支持进格回删移格与粘贴分发（71 组件）
This commit is contained in:
HIsheR
+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 支持布尔或信号禁用"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
- `packages/core/table-core`（@ui-arch/table-core）：Headless 表格逻辑内核
|
||||
- `packages/core/frame`（@ui-arch/frame）：signal + hyperscript 微框架
|
||||
- `packages/skin/ui`（@ui-arch/ui）：70 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌
|
||||
- `packages/skin/ui`（@ui-arch/ui）：71 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌
|
||||
- `packages/design/tokens`（@ui-arch/tokens）：设计令牌
|
||||
- `packages/tools/cli`（@ui-arch/cli）：`ua` 命令行 + MCP 注册表服务（private）
|
||||
- `apps/demo`（@ui-arch/demo）：交互演示，产物 apps/demo/dist/demo.html
|
||||
|
||||
+1
-1
@@ -34,7 +34,7 @@ ui-arch-mvp/
|
||||
│ │ ├── table-core/ # 表格状态内核
|
||||
│ │ └── frame/ # 信号 + hyperscript 微框架
|
||||
│ ├── skin/ # 皮肤层（DOM 组件，可发布）
|
||||
│ │ └── ui/ # 70 个组件 + ui.css
|
||||
│ │ └── ui/ # 71 个组件 + ui.css
|
||||
│ ├── design/ # 资产层（可发布）
|
||||
│ │ └── tokens/ # --ua-* 设计令牌
|
||||
│ └── tools/ # 工程层（private，不发布）
|
||||
|
||||
@@ -12,13 +12,13 @@ npm run docs # 生成人类文档站 apps/docs/index.html + Agent 全
|
||||
npm run changelog # 依据 git 提交史重写 CHANGELOG.md（发版前跑；changelog:check 可查漂移）
|
||||
```
|
||||
|
||||
## 组件（共 70 个）
|
||||
## 组件（共 71 个）
|
||||
|
||||
<!-- ua:components -->
|
||||
accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup · backTop · badge · breadcrumb · button · calendar · carousel · card · cascader · checkbox · checkboxGroup · colorPicker · commandPalette · dataTable · datePicker · descriptions · divider · drawer · empty · floatButton · form · grid · image · inputNumber · link · list · menu · modal · mentions · multiSelect · notification · pagination · popover · popconfirm · progress · radioGroup · rate · result · segmented · select · skeleton · slider · space · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · timePicker · toast · tooltip · tour · transfer · tree · treeSelect · typography · upload · virtualList · watermark
|
||||
accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup · backTop · badge · breadcrumb · button · calendar · carousel · card · cascader · checkbox · checkboxGroup · colorPicker · commandPalette · dataTable · datePicker · descriptions · divider · drawer · empty · floatButton · form · grid · image · inputNumber · link · list · menu · modal · mentions · multiSelect · notification · pagination · pinInput · popover · popconfirm · progress · radioGroup · rate · result · segmented · select · skeleton · slider · space · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · timePicker · toast · tooltip · tour · transfer · tree · treeSelect · typography · upload · virtualList · watermark
|
||||
<!-- /ua:components -->
|
||||
|
||||
分组：表单（button / textField / inputNumber / textarea / checkbox / checkboxGroup / colorPicker / switchButton / select / mentions / multiSelect / radioGroup / slider / rate / autoComplete / datePicker / timePicker / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / popconfirm / modal / drawer / menu / commandPalette）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree / treeSelect / anchor）、数据展示（dataTable / descriptions / card / list / timeline / tag / avatar / avatarGroup / image / carousel / calendar / typography / virtualList）、其他（floatButton / grid / link / space / divider / splitter / backTop / affix / tour / watermark）。
|
||||
分组：表单（button / textField / inputNumber / textarea / checkbox / checkboxGroup / colorPicker / switchButton / select / mentions / multiSelect / radioGroup / slider / rate / autoComplete / datePicker / timePicker / pinInput / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / popconfirm / modal / drawer / menu / commandPalette）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree / treeSelect / anchor）、数据展示（dataTable / descriptions / card / list / timeline / tag / avatar / avatarGroup / image / carousel / calendar / typography / virtualList）、其他（floatButton / grid / link / space / divider / splitter / backTop / affix / tour / watermark）。
|
||||
|
||||
## 可访问性约定
|
||||
|
||||
@@ -32,7 +32,7 @@ accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup
|
||||
|---|---|
|
||||
| `packages/core/frame` | @ui-arch/frame：signal / computed / effect + hyperscript（无虚拟 DOM） |
|
||||
| `packages/core/table-core` | @ui-arch/table-core：headless 表格（filter → sort → paginate 派生管线） |
|
||||
| `packages/skin/ui` | @ui-arch/ui：70 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
|
||||
| `packages/skin/ui` | @ui-arch/ui：71 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
|
||||
| `packages/design/tokens` | @ui-arch/tokens：设计令牌（暗色只换值不换名） |
|
||||
| `packages/tools/cli` | @ui-arch/cli：`ua` 命令行与 stdio MCP server |
|
||||
| `apps/demo` | 交互演示（esbuild 打包成单文件） |
|
||||
|
||||
@@ -54,6 +54,7 @@ import {
|
||||
mentions,
|
||||
multiSelect,
|
||||
pagination,
|
||||
pinInput,
|
||||
popconfirm,
|
||||
popover,
|
||||
progress,
|
||||
@@ -247,6 +248,8 @@ const dateVal = signal('2026-10-26'); // 日期选择值（外部受控演示）
|
||||
const rangeFrom = signal(''); // 区间起点
|
||||
const rangeTo = signal(''); // 区间终点
|
||||
const acValue = signal(''); // 自动补全输入值（外部受控演示）
|
||||
const pinCode = signal(''); // 验证码输入值（外部受控演示）
|
||||
const pinMask = signal(''); // 密文验证码输入值（mask 演示）
|
||||
const treeChecked = signal<string[]>(['core']); // 多选树勾选集合（外部受控演示）
|
||||
const treePick = signal('core'); // 树形选中节点 key
|
||||
const transferKeys = signal<string[]>(['a11y']); // 穿梭框右侧集合（外部受控演示）
|
||||
@@ -1072,6 +1075,24 @@ const content = h(
|
||||
h('span', { class: 'out' }, () => `当前时间：${atTime() || '未选'}`),
|
||||
),
|
||||
),
|
||||
section(
|
||||
'sec-pininput',
|
||||
'验证码输入',
|
||||
'pinInput：N 格单字符数字输入，输入自动进格、退格回删、←/→ 移格、粘贴自动分发；mask 密文显示，disabled 禁用。',
|
||||
h(
|
||||
'div',
|
||||
{ class: 'row' },
|
||||
pinInput({ value: pinCode, onChange: (v) => { if (v.length === 6) toast.success(`验证码 ${v} 已就绪`); } }),
|
||||
h('span', { class: 'out' }, () => `当前：${pinCode() || '未输入'}（试试直接粘贴整段）`),
|
||||
),
|
||||
h(
|
||||
'div',
|
||||
{ class: 'row' },
|
||||
pinInput({ value: pinMask, length: 4, mask: true }),
|
||||
h('span', { class: 'out' }, () => `密文 4 格：${pinMask().length}/4`),
|
||||
),
|
||||
h('div', { class: 'row' }, pinInput({ value: signal(''), length: 6, disabled: true })),
|
||||
),
|
||||
section(
|
||||
'sec-affix',
|
||||
'固钉',
|
||||
|
||||
+27
-1
@@ -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 可密文显示
|
||||
|
||||
一行用法：
|
||||
|
||||
|
||||
@@ -119,6 +119,7 @@
|
||||
- virtualList(props)：虚拟列表，固定行高长列表只渲染可视窗口 + 上下缓冲条，万级数据滚动不随总量掉帧；返回 { el, scrollTo } 句柄
|
||||
- commandPalette(props)：命令面板，⌘K / Ctrl+K 唤起，输入即过滤（主文案/说明/关键词三层），↑↓ 环形选择 + 回车执行 + Esc 收起，选中与关闭都归还焦点；返回 { el, open, close } 句柄
|
||||
- timePicker(props)：时间选择，时 / 分两列弹层，value 信号双向绑定 HH:mm，分钟可配步长，Esc 收起
|
||||
- pinInput(props)：验证码输入，N 格单字符数字输入，输入自动进格、退格回删、方向键移格、粘贴自动分发，value 信号双向绑定，mask 可密文显示
|
||||
- 用法: `const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')`
|
||||
- 约定: 皮肤不持有业务状态，一律委托 headless 内核或调用方信号
|
||||
- 约定: 表单类组件统一约定：*Props.value/checked/active 为 Signal 双向绑定，onChange/onInput 为回调
|
||||
|
||||
@@ -70,3 +70,4 @@ export { avatarGroup } from './avatarGroup.js';
|
||||
export { virtualList } from './virtualList.js';
|
||||
export { commandPalette } from './commandPalette.js';
|
||||
export { timePicker } from './timePicker.js';
|
||||
export { pinInput } from './pinInput.js';
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import { effect, h } from '@ui-arch/frame';
|
||||
import type { PinInputProps } from './types.js';
|
||||
|
||||
/*** 验证码输入：N 格单字符数字输入，输入自动进格、退格回删、方向键移格、粘贴自动分发，value 信号双向绑定 ***/
|
||||
export function pinInput(props: PinInputProps): HTMLDivElement {
|
||||
const length = props.length ?? 6; // 格数缺省 6
|
||||
const sanitize = (s: string): string => String(s).replace(/\D/g, '').slice(0, length); // 只留数字并截到格数
|
||||
const inputs: HTMLInputElement[] = []; // 格子引用（格子建一次不重渲染，焦点天然不丢）
|
||||
const focusAt = (i: number): void => inputs[Math.max(0, Math.min(length - 1, i))]?.focus(); // 目标格钳制到首尾
|
||||
|
||||
/*** 写回单一来源：拼接各格内容赋回外部信号（同值短路防 effect 环），并回调当前拼接串 ***/
|
||||
const commit = (): void => {
|
||||
const next = inputs.map((el) => el.value).join('');
|
||||
if (props.value() !== next) props.value(next);
|
||||
if (props.onChange) props.onChange(next);
|
||||
};
|
||||
|
||||
/*** 单格构造：输入进格 / 退格回删 / 方向键移格 / 粘贴分发，非数字键一律拦下 ***/
|
||||
const cell = (i: number): HTMLInputElement => h('input', {
|
||||
class: 'ua-input ua-pin-cell',
|
||||
type: props.mask ? 'password' : 'text',
|
||||
inputmode: 'numeric',
|
||||
autocomplete: props.mask ? 'one-time-code' : 'off',
|
||||
maxlength: 1,
|
||||
'aria-label': `第 ${i + 1} 位`,
|
||||
onFocus: () => inputs[i].select(), // 聚焦全选：直接敲键即覆盖旧值
|
||||
onInput: () => {
|
||||
inputs[i].value = sanitize(inputs[i].value).slice(-1); // 单格只留最后敲入的一位
|
||||
if (inputs[i].value && i < length - 1) focusAt(i + 1); // 敲完进下一格（末格不进）
|
||||
commit();
|
||||
},
|
||||
onKeydown: (e: KeyboardEvent) => {
|
||||
if (e.key === 'Backspace') { e.preventDefault(); if (inputs[i].value) { inputs[i].value = ''; } else if (i > 0) { inputs[i - 1].value = ''; focusAt(i - 1); } commit(); return; } // 本格有值删本格，空格回删上一格并左移
|
||||
if (e.key === 'ArrowLeft') { e.preventDefault(); focusAt(i - 1); return; }
|
||||
if (e.key === 'ArrowRight') { e.preventDefault(); focusAt(i + 1); return; }
|
||||
if (e.key.length === 1 && !/\d/.test(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault(); // 只放行数字与控制键（粘贴由 onPaste 接管）
|
||||
},
|
||||
onPaste: (e: ClipboardEvent) => {
|
||||
const digits = sanitize(e.clipboardData?.getData('text') ?? '');
|
||||
if (!digits) return;
|
||||
e.preventDefault();
|
||||
const from = digits.length >= length ? 0 : i; // 整段验证码从首格铺起，零散片段从当前格续
|
||||
for (let k = 0; k < digits.length && from + k < length; k++) inputs[from + k].value = digits[k]; // 逐格分发
|
||||
focusAt(Math.min(length - 1, from + digits.length)); // 落到末个空格，接着手输也顺手
|
||||
commit();
|
||||
},
|
||||
}) as HTMLInputElement;
|
||||
|
||||
const root = h('div', { class: 'ua-pin-input', role: 'group' }, ...Array.from({ length }, (_, i) => cell(i))) as HTMLDivElement;
|
||||
root.querySelectorAll('input').forEach((el) => inputs.push(el as HTMLInputElement));
|
||||
|
||||
effect(() => { // 外部信号 → 格子回写（同值不写避免打断输入法），禁用态支持布尔或信号
|
||||
const v = sanitize(props.value());
|
||||
const dis = typeof props.disabled === 'function' ? props.disabled() : !!props.disabled;
|
||||
inputs.forEach((el, k) => {
|
||||
const ch = v[k] ?? '';
|
||||
if (el.value !== ch) el.value = ch;
|
||||
el.disabled = dis;
|
||||
});
|
||||
});
|
||||
return root;
|
||||
}
|
||||
@@ -245,6 +245,15 @@ export interface RateProps {
|
||||
onChange?: (value: number) => void; // 评分变化回调
|
||||
}
|
||||
|
||||
/*** 验证码输入入参 ***/
|
||||
export interface PinInputProps {
|
||||
value: Signal<string>; // 当前验证码（数字拼接串），双向绑定（输入写回、外部赋值同步）
|
||||
length?: number; // 格数；缺省 6
|
||||
mask?: boolean; // 密文显示（type=password + one-time-code 自动填充）；缺省明文
|
||||
disabled?: boolean | Signal<boolean>; // 禁用态：布尔直接置位，传信号则动态同步
|
||||
onChange?: (value: string) => void; // 任一格变化回调（参数为当前已输入拼接串）
|
||||
}
|
||||
|
||||
/*** 空状态入参 ***/
|
||||
export interface EmptyProps {
|
||||
title?: string; // 主标题；缺省不渲染
|
||||
|
||||
@@ -84,7 +84,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",
|
||||
@@ -3708,6 +3709,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 支持布尔或信号禁用"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -5183,3 +5183,17 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
|
||||
padding-left: var(--ua-space-1);
|
||||
border-left: 1px solid var(--ua-border-subtle); /* 时分分界：一条 1px 细线，比留白更能说明这是两列 */
|
||||
}
|
||||
|
||||
/* ---- 验证码输入：N 格单字符数字输入（pinInput） ---- */
|
||||
.ua-pin-input {
|
||||
display: inline-flex;
|
||||
gap: var(--ua-space-2);
|
||||
}
|
||||
.ua-pin-input .ua-input {
|
||||
min-width: 0;
|
||||
width: var(--ua-control-h-lg); /* 方格：宽高同档，正方形观感 */
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums; /* 数字等宽：换位不左右窜 */
|
||||
caret-color: var(--ua-color-accent);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user