主题
SearchBar 搜索栏
用于输入关键词、触发搜索或取消搜索。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 搜索栏 -->
<fui-search-bar v-model="keyword" @search="handleSearch" />页面需声明 keyword 和 handleSearch，搜索事件返回的 detail.value 为当前关键词。
属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| background | String | 搜索栏背景色 | #F1F4FA |
| paddingTb | Number / String | 上下内边距，单位 rpx | 16 |
| paddingLr | Number / String | 左右内边距，单位 rpx | 24 |
| height | Number / String | 输入框高度，单位 rpx | 72 |
| radius | Number / String | 输入框圆角，单位 rpx | 8 |
| color | String | 输入文字颜色 | #181818 |
| inputBackground | String | 输入框背景色 | #fff |
| focus | Boolean | 是否获取焦点 | false |
| placeholder | String | 占位文字 | 请输入搜索关键词 |
| isLeft | Boolean | 占位内容是否左对齐 | false |
| value | String | Vue 2 绑定值 | - |
| modelValue | String | Vue 3 绑定值 | - |
| disabled | Boolean | 是否禁用输入，仅允许点击 | false |
| cancel | Boolean | 聚焦时是否显示取消按钮 | true |
| cancelText | String | 取消按钮文字 | 取消 |
| cancelColor | String | 取消按钮文字颜色 | #7F7F7F |
| searchText | String | 搜索按钮文字 | 搜索 |
| searchColor | String | 搜索按钮文字颜色 | #465CFF |
| showInput | Boolean | 是否显示输入框 | true |
| showLabel | Boolean | 是否显示输入框占位标签 | true |
| fixed | Boolean | 是否位于固定定位区域，微信小程序有效 | false |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| input | 输入值变化，Vue 2 双向绑定 | 输入值 |
| update:modelValue | Vue 3 双向绑定 | 输入值 |
| focus / blur | 获取或失去焦点 | 原始事件，detail 包含 value |
| clear | 点击清除按钮 | 无 |
| click | 点击搜索框 | {} |
| cancel | 点击取消 | {} |
| search | 触发搜索 | event.detail.value |
插槽和平台说明
默认插槽用于搜索栏左侧自定义内容。非 nvue 的默认背景、标题和主色可分别通过 --fui-bg-color-grey、--fui-color-title、--fui-color-primary 配置。
插槽
| 插槽 | 说明 |
|---|---|
| default | 搜索栏左侧的自定义内容 |