Combobox 搜索下拉框

搜索下拉框组件结合了输入框和下拉选择器的功能，支持关键词搜索过滤、键盘导航，适合选项较多需要快速筛选的场景。

基础用法

通过 v-model 绑定选中值，options 传入选项数组。

<TCombobox v-model="value" :options="options" placeholder="搜索..." />

别名搜索

通过 aliases 字段可以为选项设置搜索别名，用户输入中文或俗称也能匹配到对应项。

<TCombobox v-model="value" :options="[
  { value: 'apple', label: 'Apple', aliases: ['苹果'] },
]" />

尺寸与验证

支持 sm 小尺寸、lg 大尺寸，以及 valid/invalid 验证状态。

<TCombobox size="sm" placeholder="小尺寸" />
<TCombobox size="lg" placeholder="大尺寸" />
<TCombobox validation="valid" placeholder="验证通过" />
<TCombobox validation="invalid" placeholder="验证失败" />

前置/后置文本

通过 prepend-text 和 append-text 在输入框前后添加固定文本。

<TCombobox prepend-text="$" append-text=".00" :options="options" />

API

Props

Prop	说明	类型	默认值
v-model	选中的值	string	''
options	选项数组	ComboboxOption[]	[]
placeholder	占位符	string	'搜索...'
disabled	禁用	boolean	false
required	必填	boolean	false
size	尺寸	'sm' | 'lg'	undefined
validation	验证状态	'valid' | 'invalid'	undefined
block	块级（占满父容器宽度）	boolean	false
prependText	前置文本	string	undefined
appendText	后置文本	string	undefined

ComboboxOption

字段	说明	类型	默认值
value	选项值	string	—（必填）
label	显示文字	string	—（必填）
aliases	搜索别名	string[]	undefined

Slots

插槽	作用域属性	说明
option	{ option, index, active, highlighted }	自定义选项渲染
prepend	—	前置内容（输入组）
append	—	后置内容（输入组）