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
+21
View File
@@ -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',
'固钉',