iter(g234): 新增 pinInput 验证码输入组件,N 格数字输入支持进格回删移格与粘贴分发(71 组件)
This commit is contained in:
@@ -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',
|
||||
'固钉',
|
||||
|
||||
Reference in New Issue
Block a user