自动补全输入框

根据输入内容提供对应的输入建议。

TIP

在 SSR(如 Nuxt)或 SSG 场景(如 VitePress)下,您需要将组件包裹在 <client-only></client-only> 之中。

基础用法

Autocomplete 组件提供输入建议。

自定义模板

自定义如何显示输入建议。

远程搜索

从服务端搜索数据。

自定义加载 2.5.0

修改加载区域内容

API

Attributes

属性名说明类型默认值
model-value / v-model选中项绑定值string
placeholder占位文本string
clearable是否可清空booleanfalse
disabled自动补全组件是否被禁用booleanfalse
value-key输入建议对象中用于显示的键名stringvalue
debounce获取输入建议的防抖延时,单位为毫秒number300
placement菜单弹出位置enumbottom-start
fetch-suggestions获取输入建议的方法, 仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它Function
trigger-on-focuswhether show suggestions when input focusbooleantrue
select-when-unmatched在输入没有任何匹配建议的情况下,按下回车是否触发 select 事件booleanfalse
name等价于原生 input name 属性string
label输入框关联的 label 文字string
hide-loading是否隐藏远程加载时的加载图标booleanfalse
popper-class下拉列表的类名string
popper-append-to-body deprecated是否将下拉列表插入至 body 元素。 在下拉列表的定位出现问题时,可将该属性设置为 falsebooleanfalse
teleported是否将下拉列表元素插入 append-to 指向的元素下booleantrue
highlight-first-item是否默认高亮远程搜索结果的第一项booleanfalse
fit-input-width下拉框的宽度是否与输入框相同booleanfalse

Events

事件名详情类型
select点击选中建议项时触发Function
change在 Input 值改变时触发Function

Slots

插槽名描述说明类型
default自定义输入建议的内容。object
prefix输入框头部内容-
suffix输入框尾部内容-
prepend输入框前置内容,在 prefix 之前-
append输入框后置内容,在 suffix 之后-
loading 2.5.0修改加载区域内容-

Exposes

名称详情类型
activated自动补全输入框是否被激活object
blur使 input 失去焦点Function
close折叠建议列表Function
focus使 input 获取焦点Function
handleSelect手动触发选中建议事件Function
handleKeyEnter手动触发键盘回车事件Function
highlightedIndex当前高亮显示选项的索引object
highlight在建议中高亮显示一个项目Function
inputRefel-input 组件实例object
loading远程获取提示内容的加载状态指示器object
popperRefel-tooltip 组件实例object
suggestions获取自动补全结果object

源代码

组件文档

贡献者