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
+30 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T04:23:09.567Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T04:24:59.738Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -1465,6 +1465,34 @@ affix({ offset: 8 }, card({ title: '滚动时我会贴顶' }, h('p', null, '正
现场演示:apps/docs/demo.html#sec-affix
### multiSelect — 多选下拉 MultiSelect
参数:
- options(必填):CheckOption[] —— 选项集合:value / label / 可选 disabled
- value:Signal<string[]> —— 选中值数组信号;不传则内部维护
- placeholder:string —— 未选时占位文案;已选时让位给标签
- max:number —— 最多选几项:到上限后未选项自动禁用
- searchable:boolean —— 是否可输入过滤;缺省 true
- disabled:boolean | Signal<boolean> —— 禁用整个下拉
- onChange:(values: string[]) => void —— 变更回调(传副本)
示例:
```
multiSelect({ value: tagPick, max: 3, placeholder: '选择技术栈', options: [{ value: 'ts', label: 'TypeScript' }, { value: 'css', label: 'CSS 令牌' }] })
```
手把手:
1. 选中项以标签形式回显,点标签上的 × 或空输入时按退格即可删除末个标签
2. 点输入区展开弹层并聚焦输入框,输入字符即时过滤(大小写不敏感)
3. 点选项只切换该项、弹层不收起,适合连续多选;到 max 后未选项置灰不可点
4. ↑↓ 环形移动高亮、Enter 切换当前项、Esc 收起(与其它弹层共用一个 Esc 栈)
5. value 传数组信号即受控,外部写入会同步标签区
现场演示:apps/docs/demo.html#sec-multiselect
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -1524,6 +1552,7 @@ API 速览:
- watermark(props, ...children):内容容器 + 平铺水印覆盖层,canvas 生成单元、颜色取自令牌,覆盖层不挡交互
- checkboxGroup(props):多选组,value 为数组信号,min/max 用禁用边界项实现(不抛错),checkAll 支持半选且只统计未禁用项
- affix(props, ...children):固钉,滚过 offset 后内容转 fixed 贴顶、外层保留占位高度,固定后宽度随容器自适应
- multiSelect(props):多选下拉,标签式回显 + 可搜索弹层,点选不收起便于连续多选,max 到限后未选项禁用
一行用法: