SearchBar 搜索栏

用于搜索场景的输入框组件。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定搜索值。

<zq-search-bar v-model="keyword" />

const keyword = ref('')

自定义占位文字

通过 placeholder 属性设置占位文字，默认使用 i18n component.searchPlaceholder。

<zq-search-bar v-model="keyword" placeholder="搜索商品" />

搜索框形状

通过 shape 属性设置搜索框形状，支持 round（圆角）和 square（方形）。

<zq-search-bar v-model="keyword" shape="round" />
<zq-search-bar v-model="keyword" shape="square" />

显示取消按钮

通过 show-action 属性显示右侧取消按钮。

<zq-search-bar v-model="keyword" show-action @action="onCancel" />

自定义按钮文字

通过 action-text 属性自定义右侧按钮文字，默认使用 i18n common.cancel。

<zq-search-bar v-model="keyword" show-action action-text="搜索" @action="onSearch" />

监听搜索事件

通过 search 事件监听键盘确认按钮的点击。

<zq-search-bar v-model="keyword" @search="onSearch" />

function onSearch(value) {
  console.log('搜索:', value)
}

自动聚焦

通过 focus 属性设置自动聚焦。

<zq-search-bar v-model="keyword" focus />

API

Props

参数	说明	类型	默认值
v-model	搜索值	string	''
placeholder	占位提示文字	string	''（默认使用 i18n）
shape	搜索框形状	'round' | 'square'	'round'
show-action	是否显示右侧按钮	boolean	false
action-text	右侧按钮文字	string	''（默认使用 i18n）
focus	是否自动聚焦	boolean	false
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false

Events

事件名	说明	回调参数
update:modelValue	输入内容变化时触发	value: string
search	点击键盘搜索按钮时触发	value: string
focus	聚焦时触发	event: Event
blur	失焦时触发	event: Event
clear	点击清除按钮时触发	-
action	点击右侧按钮时触发	-

主题定制

变量名	说明
--color-bg-card	搜索栏背景色
--color-bg-input	搜索框背景色
--color-text-primary	输入文字颜色
--color-text-placeholder	占位文字/图标颜色
--color-primary	右侧按钮文字颜色