iter(g244): 新增 inputTag 标签输入组件,回车成标签并支持满额禁输

This commit is contained in:
HIsheR
2026-10-26 21:57:52 +08:00
parent cd8a8e9b12
commit ea5149338a
12 changed files with 288 additions and 10 deletions
+13
View File
@@ -43,6 +43,7 @@ import {
form,
formItem,
inputNumber,
inputTag,
grid,
link,
list,
@@ -258,6 +259,7 @@ const pinMask = signal(''); // 密文验证码输入值(mask 演示)
const resendCd = countdown({ seconds: 90, running: false, format: (s) => `重发(${s}s)` }); // 重发倒计时(手动启动演示)
const highlightText = signal('数据不出端、预测低于 50ms、习惯本地学习是输入法增强系统的三条底线'); // 高亮演示原文
const highlightKw = signal('本地'); // 高亮演示关键词(与搜索框信号联动)
const demoTags = signal<string[]>(['本地推理', '隐私优先']); // 标签输入演示集合(成标签 / 删 chip 双向写回)
const treeChecked = signal<string[]>(['core']); // 多选树勾选集合(外部受控演示)
const treePick = signal('core'); // 树形选中节点 key
const transferKeys = signal<string[]>(['a11y']); // 穿梭框右侧集合(外部受控演示)
@@ -1156,6 +1158,17 @@ const content = h(
textField({ placeholder: '输入关键词试试实时联动', value: highlightKw, size: 'sm' }),
),
),
section(
'sec-inputtag',
'标签输入',
'inputTag:回车 / 逗号成标签,chip 可单个删除,空框退格删末个,失焦自动入列;max 满额自动禁输。',
h(
'div',
{ class: 'row' },
inputTag({ value: demoTags, max: 5, onChange: (list) => toast.info(`当前 ${list.length} 个标签`) }),
h('span', { class: 'out' }, () => `已选:${demoTags().join(' / ') || '(空)'}`),
),
),
section(
'sec-affix',
'固钉',