iter(g60): 新增 multiSelect 多选下拉组件
This commit is contained in:
@@ -42,6 +42,7 @@ import {
|
||||
watermark,
|
||||
menu,
|
||||
modal,
|
||||
multiSelect,
|
||||
pagination,
|
||||
popover,
|
||||
progress,
|
||||
@@ -194,6 +195,7 @@ const listPick = signal(''); // 列表点击选中的条目标题
|
||||
const slideIndex = signal(0); // 轮播当前下标(外部受控演示)
|
||||
const cascaderPath = signal<string[]>(['east', 'sh']); // 级联选择路径(外部受控演示)
|
||||
const splitSizes = signal<number[]>([35, 65]); // 分栏比例(外部受控演示)
|
||||
const tagPick = signal<string[]>(['ts']); // 多选下拉选中值(外部受控演示)
|
||||
const permPick = signal<string[]>(['read']); // 多选组选中值(外部受控演示)
|
||||
const colorVal = signal('var(--ua-color-accent)'); // 颜色选择值(外部受控演示)
|
||||
const dateVal = signal('2026-10-26'); // 日期选择值(外部受控演示)
|
||||
@@ -698,6 +700,29 @@ const content = h(
|
||||
button({ label: '错误(可关)', variant: 'danger', onClick: () => notification({ title: '保存失败', description: '服务端返回 500,请稍后重试', variant: 'danger' }) }),
|
||||
),
|
||||
),
|
||||
section(
|
||||
'sec-multiselect',
|
||||
'多选下拉',
|
||||
'multiSelect:标签式回显 + 可搜索弹层,点选不收起弹层(连续多选),空输入退格删末个标签,max 到限后未选项禁用。',
|
||||
h(
|
||||
'div',
|
||||
{ class: 'row' },
|
||||
multiSelect({
|
||||
value: tagPick,
|
||||
max: 3,
|
||||
placeholder: '选择技术栈(最多 3 项)',
|
||||
onChange: (v) => toast.info(`已选 ${v.length} 项`),
|
||||
options: [
|
||||
{ value: 'ts', label: 'TypeScript' },
|
||||
{ value: 'dom', label: '原生 DOM' },
|
||||
{ value: 'css', label: 'CSS 令牌' },
|
||||
{ value: 'test', label: '测试' },
|
||||
{ value: 'wasm', label: 'WASM(暂未支持)', disabled: true },
|
||||
],
|
||||
}),
|
||||
h('span', { class: 'out' }, () => `已选:${tagPick().join(' / ') || '无'}`),
|
||||
),
|
||||
),
|
||||
section(
|
||||
'sec-checkgroup',
|
||||
'多选组',
|
||||
|
||||
Reference in New Issue
Block a user