自动补全输入框

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

基础用法

Autodcomplete 组件提供输入建议。

自定义模板

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

远程搜索

从服务端搜索数据。

API

属性

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

事件

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

插槽

插槽名描述说明
default自定义输入建议的内容。 自定义标签,参数为
prefix输入框头部内容
suffix输入框尾部内容
prepend输入框前置内容,在 prefix 之前
append输入框后置内容,在 suffix 之后

对外暴露的成员

名称详情类型
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

源代码

组件文档

贡献者