> **组件名:uni-search-bar**
> 代码块: `uSearchBar`
>
> [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-search-bar)
搜索栏组件
### 基本用法
在 ``template`` 中使用组件
```html
```
## API
### SearchBar Props
|属性名|类型 |默认值 |说明|
|:-:|:-:|:-:|:-:|
|value/v-model |StringNumber | |搜索栏绑定值|
|placeholder|String |搜索 |搜索栏Placeholder|
|radius|Number |10 |搜索栏圆角,单位px|
|clearButton|String |auto |是否显示清除按钮,可选值`always`-一直显示、`auto`-输入框不为空时显示、`none`-一直不显示 |
|cancelButton|String|auto |是否显示取消按钮,可选值`always`-一直显示、`auto`-输入框不为空时显示、`none`-一直不显示 |
|cancelText|String |取消|取消按钮的文字|
|bgColor|String |#F8F8F8|输入框背景颜色|
|maxlength|Number|100|输入最大长度|
|focus|Boolean |false ||
### SearchBar Events
|事件称名|说明|返回参数|
|:-:|:-:|:-:|
|@confirm|uniSearchBar 的输入框 confirm 事件,返回参数为uniSearchBar的value |e={value:Number} |
|@input|uniSearchBar 的 value 改变时触发事件,返回参数为uniSearchBar的value|e=value |
|@cancel|点击取消按钮时触发事件,返回参数为uniSearchBar的value|e={value:Number} |
|@clear|点击清除按钮时触发事件,返回参数为uniSearchBar的value|e={value:Number} |
|@focus|input 获取焦点时触发事件,返回参数为uniSearchBar的value|e={value:Number} |
|@blur|input 失去焦点时触发事件,返回参数为uniSearchBar的value|e={value:Number} |
### 替换 icon 的 slot 插槽
|插槽称名|说明|
|:-:|:-:|
|searchIcon |替换组件的搜索图标|
|clearIcon |替换组件的清除图标|
```html
X
```
## 组件示例
点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar)