118 lines
3.3 KiB
Markdown
118 lines
3.3 KiB
Markdown
# 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为筛选标签的下标 | |