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为筛选标签的下标 |
|