# 组件说明

## prop

| 参数             |  类型  | 是否必填 | 默认值 |                           说明 |
| ---------------- | :----: | :------: | :----: | -----------------------------: |
| search           | array  |    是    |   -    | 遍历的搜索栏数据；详细*search* |
| searchLabelWidth | string |    否    |   -    |            搜索栏的 label 宽度 |

#### search 搜索模块配置

---

- mode 搜索框模式；可选值 ：
  - daterange ：日期范围选择；
  - monthrange ：月份范围选择；
  - input：输入框；
  - select：下拉选项；
  - checkbox：复选框；
  - button：按钮；
- value ：范围日期选择时，对应数组
- options ： {label:'',vlaue:''}

| 参数        |     类型     | 是否必填 |   默认值    |                                     说明 |
| ----------- | :----------: | :------: | :---------: | ---------------------------------------: |
| mode        |    string    |    是    |      -      |                               搜索框模式 |
| width       |    string    |    否    |      -      |                            宽度；单位 px |
| labelWidth  |    string    |    否    |      -      |                               label 宽度 |
| label       |    string    |    否    |      -      |                          搜索 label 文字 |
| value       | string/array |    是    |      -      |                                 搜索的值 |
| key         |    string    |    否    |      -      |         搜索框的 key，返回搜索对象的 key |
| placeholder |    string    |    否    |      -      |   输入框的占位符，按钮的文字；复选框的文字 |
| size        |    string    |    否    |    mini     |                               按钮的尺寸 |
| type        |    string    |    否    |      -      |                               按钮的类型 |
| plain       |    boolean   |   否     |  false      |                         按钮是否朴素按钮 |
| options     |    array     |    否    |      -      |               mode=select 时；下拉的选项 |
| loading     |   boolean    |    否    |    false    |             mode=button 时，按钮加载状态 |
| show        |   function   |    否    | return true |                             按钮是否显示 |

##### @event 搜索栏事件

- events(item,data);事件
  - item：所触发事件的 item 数据
  - 搜索栏的数据对象 {key:value} 的形式返回

##### slot

- 插槽
  - 在搜索条件前加入额外的搜索；额外的搜索数据需求单独处理