uni-search-bar.md

> **组件名：uni-search-bar**
> 代码块： `uSearchBar`
> 
>  [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-search-bar)

搜索栏组件

### 基本用法

在 ``template`` 中使用组件

```html
<!-- 基本用法 -->
<uni-search-bar @confirm="search" @input="input" ></uni-search-bar>

<!-- v-model 用法 -->
<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @change="change" @clear="clear"></uni-search-bar>

<!-- 自定义Placeholder -->
<uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar>

<!-- 设置圆角 -->
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
```

## 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
<!-- 替换组件的搜索图标 -->
<uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
	<template v-slot:searchIcon>
		<uni-icons  color="#999999" size="18" type="home" />
	</template>
</uni-search-bar>

<!-- 替换组件的清除图标 -->
<uni-search-bar placeholder="自定义clearIcon" @confirm="search" @cancel="cancel" cancel-text="cancel">
	
	<template v-slot:clearIcon>
		<view style="color: #999999" >X</view>
	</template>
</uni-search-bar>

```


## 组件示例

点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar](https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar)