Skip to content

基础自动补全

@astryxdesign/core v0.7.1 · BaseTypeahead

属性 ​

属性类型默认值说明
modelValueT | nullnull当前选中的条目。空表示还没选。
searchSourceSearchSource<T>—静态或者异步的搜索源,要有 search,可选 bootstrap。必填。
labelstring—输入框的无障碍名。外面已经有 <label for> 指过来时就不用传。
inputIdstring自动生成输入框的 id,好让外面的标签对上。
describedBystring—外面已经算好的说明和状态文案的 id。
ariaDescribedBystring—专给输入框用的 aria-describedby 别名。写了它就以它为准。
ariaLabelledBystring—专给输入框用的 aria-labelledby 别名。写了它就以它为准。
anchorRefHTMLElement | null—下拉挂靠的元素,也用它来量宽度。不传就用输入框自己那层。
placeholderstringSearch…占位文字,还没选东西时显示。
disabledbooleanfalse禁用输入框。
disabledReasonstring—为什么禁用。悬停或键盘聚焦时弹出提示,同时当说明念出来,输入框保持可聚焦。
isFocusableDisabledbooleanfalse强制让禁用的输入框还能聚焦(用 aria-disabled 加 readonly),这样调用方给的禁用原因读得到。文字还是打不进去。
status'default' | 'success' | 'warning' | 'error''default'输入框边框的校验色。提示文案由调用方的字段自己负责。
size'sm' | 'md' | 'lg''md'输入框和下拉每一行的大小。
clearablebooleanfalse显示清除按钮。
debounceMsnumber150打字停多久才开始搜,单位毫秒。本地数据可以设 0。
maxMenuItemsnumber10下拉最多显示多少行。
menuWidthnumber—下拉想要的宽度,单位像素。不会比挂靠元素窄,也不会超出视口。
minQueryLengthnumber1至少打几个字才搜,按看得见的字符数算。不够就不搜,下拉也不开。
showOnFocusbooleanfalse一聚焦、还没打字就把结果列出来。是 hasEntriesOnFocus 的旧名字,两个开一个就行。
hasEntriesOnFocusbooleanfalse一聚焦、还没打字就把结果列出来。
hasAutoFocusbooleanfalse挂载后自动把光标放进输入框。
emptyTextstring | null—数据源一条都没有时显示的文字。
emptySearchTextstring | null跟随语言的「没有找到结果」搜不到东西时显示的文字。null 当作没传,用默认那句;传空字符串就什么都不画。
requiredbooleanfalse把这个输入框标成必填。
namestring—表单字段名。提交的是选中条目的 id。
inputTabIndexnumber—输入框在 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:换掉「没有结果」的内容。