iter(g208): multiSelect 支持一键清空
This commit is contained in:
@@ -54,7 +54,9 @@ export function multiSelect(props: MultiSelectProps): HTMLElement {
|
||||
box.append(tagWrap, input); // 标签区在前、输入框在后,横向排布
|
||||
const list = h('ul', { class: 'ua-multiselect-list', role: 'listbox', 'aria-multiselectable': 'true' }) as HTMLElement;
|
||||
const pop = h('div', { class: () => `ua-multiselect-pop${open() ? ' ua-open' : ''}${place() === 'top' ? ' is-flip' : ''}` }, list) as HTMLElement;
|
||||
const root = h('div', { class: () => `ua-multiselect${open() ? ' ua-open' : ''}` }, box, pop) as HTMLElement;
|
||||
const clearBtn = h('button', { type: 'button', class: 'ua-select-clear', 'aria-label': '清空所选', hidden: true, onClick: (e: Event) => { e.stopPropagation(); update([]); input.focus(); } }, '×') as HTMLElement; // 复用 select 清空钮样式;阻止冒泡免得清完又展开
|
||||
const root = h('div', { class: () => `ua-multiselect${open() ? ' ua-open' : ''}` }, box, props.clearable ? clearBtn : null, pop) as HTMLElement;
|
||||
effect(() => { clearBtn.hidden = !value().length; }); // 有值才显示(clearable 未开时按钮根本不挂载)
|
||||
|
||||
/*** 重绘标签区与候选:标签带删除钮,候选带勾选态与禁用态 ***/
|
||||
const render = (): void => {
|
||||
|
||||
@@ -732,6 +732,7 @@ export interface MultiSelectProps {
|
||||
max?: number; // 最多选几项:到上限后未选项禁用
|
||||
maxTagCount?: number; // 标签区最多显示几个,超出折成「+N」;缺省全显示
|
||||
searchable?: boolean; // 是否可输入过滤;缺省 true
|
||||
clearable?: boolean; // 开启后有选中值时显示一键清空按钮;缺省不渲染
|
||||
disabled?: boolean | Signal<boolean>; // 禁用整个下拉
|
||||
onChange?: (values: string[]) => void; // 变更回调(传副本)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user