基础自动补全
@astryxdesign/core v0.7.1 · BaseTypeahead
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | T | null | null | 当前选中的条目。空表示还没选。 |
searchSource | SearchSource<T> | — | 静态或者异步的搜索源,要有 search,可选 bootstrap。必填。 |
label | string | — | 输入框的无障碍名。外面已经有 <label for> 指过来时就不用传。 |
inputId | string | 自动生成 | 输入框的 id,好让外面的标签对上。 |
describedBy | string | — | 外面已经算好的说明和状态文案的 id。 |
ariaDescribedBy | string | — | 专给输入框用的 aria-describedby 别名。写了它就以它为准。 |
ariaLabelledBy | string | — | 专给输入框用的 aria-labelledby 别名。写了它就以它为准。 |
anchorRef | HTMLElement | null | — | 下拉挂靠的元素,也用它来量宽度。不传就用输入框自己那层。 |
placeholder | string | Search… | 占位文字,还没选东西时显示。 |
disabled | boolean | false | 禁用输入框。 |
disabledReason | string | — | 为什么禁用。悬停或键盘聚焦时弹出提示,同时当说明念出来,输入框保持可聚焦。 |
isFocusableDisabled | boolean | false | 强制让禁用的输入框还能聚焦(用 aria-disabled 加 readonly),这样调用方给的禁用原因读得到。文字还是打不进去。 |
status | 'default' | 'success' | 'warning' | 'error' | 'default' | 输入框边框的校验色。提示文案由调用方的字段自己负责。 |
size | 'sm' | 'md' | 'lg' | 'md' | 输入框和下拉每一行的大小。 |
clearable | boolean | false | 显示清除按钮。 |
debounceMs | number | 150 | 打字停多久才开始搜,单位毫秒。本地数据可以设 0。 |
maxMenuItems | number | 10 | 下拉最多显示多少行。 |
menuWidth | number | — | 下拉想要的宽度,单位像素。不会比挂靠元素窄,也不会超出视口。 |
minQueryLength | number | 1 | 至少打几个字才搜,按看得见的字符数算。不够就不搜,下拉也不开。 |
showOnFocus | boolean | false | 一聚焦、还没打字就把结果列出来。是 hasEntriesOnFocus 的旧名字,两个开一个就行。 |
hasEntriesOnFocus | boolean | false | 一聚焦、还没打字就把结果列出来。 |
hasAutoFocus | boolean | false | 挂载后自动把光标放进输入框。 |
emptyText | string | null | — | 数据源一条都没有时显示的文字。 |
emptySearchText | string | null | 跟随语言的「没有找到结果」 | 搜不到东西时显示的文字。null 当作没传,用默认那句;传空字符串就什么都不画。 |
required | boolean | false | 把这个输入框标成必填。 |
name | string | — | 表单字段名。提交的是选中条目的 id。 |
inputTabIndex | number | — | 输入框在 Tab 顺序里的位置。 |
事件
update:modelValue(value: T | null)/change(value: T | null):选中、或者清空了。search(query: string)/changeQuery(query: string):搜索词变了。两个都会发,search是旧名字。openChange(isOpen: boolean):下拉开了或者关了。
上面没列的原生属性和监听器都会落到输入框上,所以 @keydown、@focus、@blur 和 aria-* 跟写在普通 <input> 上一样。keydown 监听器跑在内置键盘处理之前,想跳过内置处理就调 event.preventDefault()。
插槽
icon:输入框开头的图案。这层对读屏是隐藏的。item:换掉默认那一行,会收到item、isActive和isSelected。负责高亮、选中、指针和键盘的外壳还在。empty:换掉「没有结果」的内容。