# 菜单栏组件
----
采用`iview-ui`中的样式变量，简化功能，熟悉 css \(^o^)/~。
### 基础用法
- 基础的searchBar用法
:::demo
```html
```
:::
### 左右设计，各占一半
- 左右设计用法。
:::demo
```html
```
:::
### 折叠用法
- 折叠用法。
:::demo
```html
```
:::
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | -------------------- | ------ | ------ | ------ |
| searchType | 那种类型的设计用法 | String | 1,2,3 | 1 |
| input | 是否显示input控件 | Boolean | - | true |
| select | 是否显示单选select控件 | Boolean | - | true |
| selMultify | 是否显示复选select控件 | Boolean | - | true |
| selTree | 是否显示下拉选择树 | Boolean | - | true |
| datePicker | 是否显示日期选择控件 | Boolean | - | true |
| findBtn | 是否显示查询控件 | Boolean | - | true |
| searchBtn | 是否显示搜搜重置按钮 | Boolean | - | true |
| icon | 折叠布局是否显示箭头 | Boolean | - | true |
| boxshow | 折叠布局显示隐藏 | Boolean | - | false |
| inputPlaceholder | input占位文本 | String | - | 请输入 |
| selPlaceholder | 单选select占位文本 | String | - | 请选择 |
| selMulPlaceholder | 复选select占位文本 | String | - | 请选择 |
| datePlaceholder | 日期控件占位文本 | String | - | 请选择时间 |
| selList | 单选下拉框数据 | Array | - | - |
| selMulList | 多选下拉框数据 | Array | - | - |
| selectTreeList | 下拉选择树数据 | Array | - | - |
| id | 下拉树当前选中的id | String | - | 0 |
| depShowType | 下拉树自定义属性 | Object | - | {value: "id",label: "name",children: "nodes"} |
| dateType | 日期控件类型 | String | - | date |
| menuItemIcon | menuItem的Icon是否显示 | Boolean | - | false |
### Events
| 事件名 | 说明 | 返回值 |
| -------------- | ---------------- | ---------------------------- |
| @getInputVal | input的change或回车事件 | 当前input值 |
| @getSelVal | 单选select的change事件 | 当前单选select选中的值 |
| @getSelMulVal | 复选select的change事件 | 当前复选select选中的值 |
| @getDateTimeVal | 日期控件的change时间 | 当前日期选中的值 |
| @toQuery | 搜索按钮点击事件 | - |
| @toClear | 重置按钮点击事件 | - |
| @onNode | 下拉选择树点击当前节点触发| - |
| @resert | 清空下拉选择树事件 | 2 |
| @add | 左右布局时，新增事件触发 | - |