自动填充 AutoComplete

有提示的文本输入框。

基础使用

传入 options 作为选项。传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

隐藏源代码

禁用选项

options 中，选项置 disabled 为 true 可禁用选项。

隐藏源代码

分组

options 中，也支持传入选项组。

隐藏源代码

远程加载

设置 loading、showPopoverEmpty 属性和监听 input 事件，实现远程加载时的 UI 变化。

隐藏源代码

追加模式

选中选项后添加到输入框而不是覆盖原内容，需要设置 append 属性开启，配合传入 filter、shouldShowPopover 函数控制弹出框的选项和展示。

隐藏源代码

虚拟列表

virtualScroll 属性开启虚拟列表，选项数据量大时可以开启提高性能。

隐藏源代码

自定义渲染

option 插槽自定义选项渲染，group-label 插槽自定义分组标签名渲染。

隐藏源代码

更多配置

AutoComplete 还拥有 Input 组件的大部分功能。

Disabled, Readonly, Loading & Clearable

Shape

Size

Slot

prefix

suffix

Composite

Status

Expose

隐藏源代码

API

AutoCompleteProps

属性	类型	可选	默认值	描述	版本
modelValue	string | null	是		自动填充输入框的值（受控模式），支持 v-model。	0.0.2
defaultValue	string | null	是		自动填充输入框的默认值（非受控模式）。	0.0.2
options	string	是		选项列表。	0.0.2
placeholder	string	是		占位符文本。	0.0.2
disabled	boolean	是	false	是否禁用。	0.0.2
readonly	boolean	是	false	是否只读。	0.0.2
clearable	boolean	是	false	是否显示清除按钮。	0.0.2
loading	boolean	是	false	是否显示加载状态。	0.0.2
size	'medium' | 'large' | 'small'	是	'medium'	自动填充输入框尺寸。	0.0.2
shape	'rect' | 'round'	是	'rect'	自动填充输入框形状。	0.0.3
showPopoverEmpty	boolean	是	false	是否在选项为空时展示弹出框。	0.0.2
shouldShowPopover	(value: string, optionsFiltered: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => boolean	是		判断输入时是否展示弹出框的函数。	0.0.2
filter	(keyword: string, options: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => (string | AutoCompleteOption | AutoCompleteGroupOption)[]	是		筛选选项的函数。	0.0.2
append	boolean	是	false	追加模式。	0.0.2
virtualScroll	boolean	是	false	是否开启虚拟滚动。	0.0.3
virtualListProps	Omit<VirtualListProps, 'list' | 'fixedHeight'> & RestAttrs	是		虚拟列表属性。	0.0.3
borderRadius	NumberOrPercentage | NumberOrPercentage[]	是		圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。	0.0.2
status	'success' | 'warning' | 'error' | 'normal'	是	'normal'	表单验证状态。	0.0.2
autofocus	boolean	是	false	原生 <input> 的 autofocus 属性。	0.0.2
dropdownProps	Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>	是		下拉弹层的配置。	0.2.0
optionsDestroyOnHide	boolean	是	false	下拉选项是否会在隐藏时销毁。	0.0.3
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能。	0.1.0

AutoCompleteEvents

事件	参数	描述	版本
input	value: string, e: Event	自动填充输入框输入时的回调。	0.0.2
update:modelValue	value: string	更新 modelValue 的回调。	0.0.2
change	value: string, e: Event | undefined	输入内容变化时的回调。	0.0.2
clear	value: string	点击清除文本按钮，清除内容时的回调。	0.0.2
blur	e: FocusEvent	自动填充输入框失焦时的回调。	0.0.2
focus	e: FocusEvent	自动填充输入框聚焦时的回调。	0.0.2
select	value: string, option: string | AutoCompleteOption, e: MouseEvent	选中选项的回调。	0.0.2
dropdownOpen		下拉面板展示的回调。	0.2.0
dropdownClose		下拉面板关闭的回调。	0.2.0

AutoCompleteSlots

插槽	参数	描述	版本
prefix		前缀内容。	0.0.2
suffix		后缀内容。	0.0.2
option	option: string | AutoCompleteOption	选项内容。	0.0.2
group-label	option: AutoCompleteGroupOption	选项组的标签名。	0.0.2

AutoCompleteExpose

属性	类型	可选	默认值	描述	版本
focus	() => void	否		聚焦当前控件。	0.0.2
blur	() => void	否		取消聚焦当前控件。	0.0.2
clear	() => void	否		清空当前输入内容。	0.0.2
select	() => void	否		选中当前输入内容。	0.0.2

Option, GroupOption

export interface Option<T = any> {
	value: T
	label: string
}

export interface GroupOption<T = any> {
	children: (Option<T> | string)[]
	type: 'group'
}

OptionListOption, OptionListOption

export interface OptionListOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}

export interface OptionListGroupOption extends GroupOption {
	label: string
	key: string | number | symbol
	children: (OptionListOption | string)[]
}

AutoCompleteOption, AutoCompleteGroupOption

export interface AutoCompleteOption extends OptionListOption<string> {
}

export interface AutoCompleteGroupOption extends OptionListGroupOption {
	children: (AutoCompleteOption | string)[]
}

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}