开发预览更新于 2026-05-10

SearchInput 搜索框

预设 search 图标 + 清空按钮 + 可选快捷键提示的输入框，按 Enter 触发搜索事件。

基础用法

左侧固定 search 图标；非空时右侧出现 × 清空按钮，点击清空并触发 clear。回车触发 search(value)。

<CfSearchInput
v-model="q"
placeholder="搜索文档…"
@search="(v) => console.log(v)"
/>

<CfSearchInput
value={q}
onChange={setQ}
placeholder="搜索文档…"
onSearch={(v) => console.log(v)}
/>

快捷键提示

shortcut 在最右挂一个 kbd 提示文本。常配合页面级监听 Ctrl K / ⌘K 跳到搜索框。

<CfSearchInput v-model="q" placeholder="按 Ctrl K 聚焦" shortcut="Ctrl K" />

<CfSearchInput value={q} onChange={setQ} placeholder="按 Ctrl K 聚焦" shortcut="Ctrl K" />

三档尺寸

size 与 Input / Select 一致 — sm / md（默认）/ lg。

<CfSearchInput v-model="a" size="sm" />
<CfSearchInput v-model="b" size="md" />
<CfSearchInput v-model="c" size="lg" />

<CfSearchInput value={a} onChange={setA} size="sm" />
<CfSearchInput value={b} onChange={setB} size="md" />
<CfSearchInput value={c} onChange={setC} size="lg" />

禁用

disabled 灰显且不响应点击。

<CfSearchInput model-value="（已禁用）" disabled />

<CfSearchInput value="（已禁用）" disabled />

API

Prop	类型	默认值	说明
`modelValue` (Vue) / `value` (React)	`string`	`''`	当前值
`placeholder`	`string`	`'搜索…'`	占位提示
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	高度
`disabled`	`boolean`	`false`	禁用
`clearable`	`boolean`	`true`	显示清空按钮（值非空时）
`shortcut`	`string`	—	右侧 kbd 提示文本

事件：

Vue：@update:modelValue、@search、@clear
React：onChange、onSearch、onClear