SearchBox 搜索框

EwSearchBox 是本库的招牌组件：一体式三段结构 —— 分类下拉 ∣ 放大镜输入 ∣ 后缀动作位。 16px 大圆角配弥散软阴影，focus 时浮现主色光环，适合作为首屏的视觉锚点。

基础用法

大搜索栏三段式

categories 为空数组时隐藏分类位；suffix 后缀位适合放快捷键提示（⌘ K）或收藏、历史记录等轻动作。

⌘K

<EwSearchBox large placeholder="搜索文章、模板或帮助…" :categories="['全部', '文章', '帮助']">
  <!-- 后缀位两种常见用法 -->
  <template #suffix>
    <EwKeycap :keys="['⌘', 'K']" />                     <!-- 快捷键提示 -->
    <EwIconButton icon="star-line" size="small" aria-label="收藏搜索结果" />  <!-- 轻动作 -->
  </template>
</EwSearchBox>

受控使用

双向绑定

搜索词与分类分别双向绑定，search 事件在输入与切换分类时触发。

当前：词「（空）」 · 分类「全部」

<EwSearchBox v-model="kw" v-model:category="cat" :categories="cats" @search="onSearch" />

与 EwIconGrid 的关系

EwIconGrid 内部就使用本组件作为搜索头；单独引入 SearchBox 适合自定义搜索场景。

API

Props

属性	说明	类型	默认值
v-model	搜索词	string	''
categories	分类项（字符串或 { label, value }），空数组隐藏分类位	array	[]
v-model:category	当前分类	string	''
size	尺寸（large 为 hero 级）	'default' | 'large'	'default'
placeholder	占位文案	string	'Search'
aria-label	无障碍标签（缺省取 placeholder）	string	placeholder

事件

事件	说明	参数
update:modelValue	输入时派发	string
update:category	切换分类时派发	string
search	输入或切换分类时派发	string

插槽

插槽	说明
suffix	后缀动作位：快捷键提示（EwKeycap）、收藏 / 历史记录（EwIconButton）等轻动作