iter(g159): 多选下拉支持标签折叠

This commit is contained in:
HIsheR
2026-10-26 16:02:24 +08:00
parent cbf0526408
commit 312e80118f
7 changed files with 51 additions and 7 deletions
+14 -1
View File
@@ -228,6 +228,7 @@ const slideIndex = signal(0); // 轮播当前下标(外部受控演示)
const cascaderPath = signal<string[]>(['east', 'sh']); // 级联选择路径(外部受控演示)
const splitSizes = signal<number[]>([35, 65]); // 分栏比例(外部受控演示)
const tagPick = signal<string[]>(['ts']); // 多选下拉选中值(外部受控演示)
const tagFold = signal<string[]>(['ts', 'dom', 'css']); // 多选下拉折叠演示:预置 3 项看溢出
const permPick = signal<string[]>(['read']); // 多选组选中值(外部受控演示)
const colorVal = signal('var(--ua-color-accent)'); // 颜色选择值(外部受控演示)
const dateVal = signal('2026-10-26'); // 日期选择值(外部受控演示)
@@ -882,7 +883,7 @@ const content = h(
section(
'sec-multiselect',
'多选下拉',
'multiSelect:标签式回显 + 可搜索弹层,点选不收起弹层(连续多选),空输入退格删末个标签,max 到限后未选项禁用。',
'multiSelect:标签式回显 + 可搜索弹层,点选不收起弹层(连续多选),空输入退格删末个标签,max 到限后未选项禁用,maxTagCount 折叠溢出标签。',
h(
'div',
{ class: 'row' },
@@ -900,6 +901,18 @@ const content = h(
],
}),
h('span', { class: 'out' }, () => `已选:${tagPick().join(' / ') || '无'}`),
multiSelect({
value: tagFold,
maxTagCount: 2,
placeholder: '标签折叠演示',
options: [
{ value: 'ts', label: 'TypeScript' },
{ value: 'dom', label: '原生 DOM' },
{ value: 'css', label: 'CSS 令牌' },
{ value: 'test', label: '测试' },
],
}),
h('span', { class: 'out' }, () => `折叠后仅露出 2 枚标签,其余折成 +N(共 ${tagFold().length} 项)`),
),
),
section(