# spring-search-box






## SearchBox 搜索框
> 组件名：spring-search-box


搜索框组件

> **注意事项**
> 本组件使用了uni-icons, 请在使用前先引用uni-icons组件。
> 本组件使用了iconfont图标, 如若更换图标，请自行上传iconfont.css进行更换。


### 安装方式

本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。


### 基本用法

在 ``template`` 中使用组件

```html
<spring-search-box @change="change" @scan="scan"></spring-search-box>
```

### 显示右侧扫码或重置按钮

```html
<spring-search-box :showScan="true" :showReset="true"></spring-search-box>
```


### 显示左侧标签

```html
<spring-search-box :showLabel="true" :columns="columns" :showLine="true"></spring-search-box>
```

### 左侧标签筛选

```html
<spring-search-box :isLabelPicker="true" :columns="columns" :showLine="true"></spring-search-box>
```

### 不显示左侧搜索图标

```html
<spring-search-box :showSearch="false" :columns="columns" :isLabelPicker="true"
			:showLine="true"></spring-search-box>
```



```javascript

export default {
	data() {
		return {
			columns: [{
					label: '作品名称',
					value: ''
				},
				{
					label: '作品作者',
					value: ''
				}
			]
		}
	},
	methods: {
		change(e) {
			console.log(e);
		},

		scan(e) {
			console.log(e);
		}
	}
}

```


## API

### SearchBox Props

|  属性名					|    类型	| 默认值			| 说明																													|
|									|					|
| columns					| Array		|		-				| 标签筛选数据，期望数据格式columns: [{label: '', content:''}...]	|
| fontSize				| String	| 30rpx			| 字体大小																											|
| bgColor					| String	| #D4E5EF		| 背景色																												|
| color						| String	|	#354E6B		| 文字颜色及图标颜色																							|
| height					| String	| 90rpx			| 组件高度，单位 rpx																							|
| padding					| String	| 0 30rpx		| 内边距																												|
| lineHeight			| String	| 40rpx			| 线条高度																											|
|	placeholder			|String		|	请输入内容	|	placeholder文字																							|
|	placeholderColor|String		|	#354E6B		|	placeholder文字颜色																						|
| showLabel				| Boolean	| false			| 是否显示标签																									|
| showLine				| Boolean	| false			| 是否显示线条																									|
| showScan				| Boolean	| false			| 是否显示扫码图标																								|
| showSearch			| Boolean	| true			| 是否显示搜索图标																								|
| showReset				| Boolean	| false			| 是否显示重置图标																								|
| isLabelPicker		| Boolean	| false			| 是否标签筛选																									|

|showMonth		| Boolean	| true			| 是否显示月份为背景																							|

### SearchBox Events

|  事件名	| 说明																|返回值																															|
|					|																		|																																		|
| change	| 搜索框输入时、切换标签筛选时、重置时触发	| {columnsIndex: null, inputValue: ''}， columnsIndex为筛选标签的下标	|