iter(g60): 新增 multiSelect 多选下拉组件

This commit is contained in:
HIsheR
2026-10-26 12:25:13 +08:00
parent 184f972486
commit dbdae9ffdf
12 changed files with 430 additions and 10 deletions
+54 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T04:23:09.567Z",
"generatedAt": "2026-10-26T04:24:59.738Z",
"repoRoot": ".",
"packages": [
{
@@ -198,7 +198,8 @@
"tour(props):引导漫游,返回 { el, start, close } 句柄;聚光框按 target 选择器定位,卡片自动选方位,Esc / 跳过走 onClose",
"watermark(props, ...children):内容容器 + 平铺水印覆盖层,canvas 生成单元、颜色取自令牌,覆盖层不挡交互",
"checkboxGroup(props):多选组,value 为数组信号,min/max 用禁用边界项实现(不抛错),checkAll 支持半选且只统计未禁用项",
"affix(props, ...children):固钉,滚过 offset 后内容转 fixed 贴顶、外层保留占位高度,固定后宽度随容器自适应"
"affix(props, ...children):固钉,滚过 offset 后内容转 fixed 贴顶、外层保留占位高度,固定后宽度随容器自适应",
"multiSelect(props):多选下拉,标签式回显 + 可搜索弹层,点选不收起便于连续多选,max 到限后未选项禁用"
],
"keyTypes": [
"ButtonProps",
@@ -2549,6 +2550,57 @@
"固定期间宽度与横向位置跟随占位容器,窗口缩放或父容器变宽都自动贴合",
"内滚容器场景把该元素传给 target,判定改为基于它的滚动位置"
]
},
{
"id": "multiSelect",
"title": "多选下拉 MultiSelect",
"demo": "sec-multiselect",
"props": [
{
"n": "options",
"t": "CheckOption[]",
"r": 1,
"d": "选项集合:value / label / 可选 disabled"
},
{
"n": "value",
"t": "Signal<string[]>",
"d": "选中值数组信号;不传则内部维护"
},
{
"n": "placeholder",
"t": "string",
"d": "未选时占位文案;已选时让位给标签"
},
{
"n": "max",
"t": "number",
"d": "最多选几项:到上限后未选项自动禁用"
},
{
"n": "searchable",
"t": "boolean",
"d": "是否可输入过滤;缺省 true"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
"d": "禁用整个下拉"
},
{
"n": "onChange",
"t": "(values: string[]) => void",
"d": "变更回调(传副本)"
}
],
"example": "multiSelect({ value: tagPick, max: 3, placeholder: '选择技术栈', options: [{ value: 'ts', label: 'TypeScript' }, { value: 'css', label: 'CSS 令牌' }] })",
"steps": [
"选中项以标签形式回显,点标签上的 × 或空输入时按退格即可删除末个标签",
"点输入区展开弹层并聚焦输入框,输入字符即时过滤(大小写不敏感)",
"点选项只切换该项、弹层不收起,适合连续多选;到 max 后未选项置灰不可点",
"↑↓ 环形移动高亮、Enter 切换当前项、Esc 收起(与其它弹层共用一个 Esc 栈)",
"value 传数组信号即受控,外部写入会同步标签区"
]
}
]
},