maycur-business/lib/MkSelect/README.md

maycur business react components of web

#### MkSelect下拉选择器

## 何时使用

- 弹出一个下拉菜单给用户选择操作，类似antd的下拉Select，但是不同的是MkSelect不对children的类型做限制，MkSelect也可以看成是一个单纯的弹出，弹出的内容可自定义。
  
- OptGroup与Option则可以看成是带有样式的div，里面的内容可以自定义，但是Option里面的children如果不是string的话必须要写title，不然表单回显会显示object。

- 弹框是利用rc-trigger,所有的参数开放,可自行查看rc-trigger的参数以及使用方法，下面也会简单列出

### Select props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| placeholder | 选择框默认文字 | string | - |
| value | 默认值 | string | - |
| disabled | 是否禁用 | boolean | - |
| style | 自定义select样式 | object | -  |
| dropdownStyle | 下拉菜单的 style 属性 | object | - |
| actionVisible | 右边的icon显示与否(默认显示) | string | true |
| iconClass | 左边的icon样式（传值显示，不传不显示） | string | - |
| onFocus | 获得焦点时回调 | function | - |
| onBlur | 	失去焦点的时回调 | function | - |
| onClick | 选中 | function | - |
| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value, option:Array) | - |
| onMouseEnter | 鼠标移入时回调 | function | - |
| onMouseLeave | 鼠标移出时回调 | function | - |

### Trigger props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| popupClassName | 添加到弹出窗口的附加className	 | string | - |
| destroyPopupOnHide | 	隐藏时是否破坏弹出窗口	 | boolean | - |
| getPopupClassNameFromAlign | 根据align添加到弹出窗口的附加className | getPopupClassNameFromAlign(align: Object):String | - |
| action | 哪些动作会导致显示弹出窗口。“悬停”，“点击”，“焦点”的枚举 | string[] | -  |
| mouseEnterDelay | 延迟鼠标进入时的显示时间、单位 | number | - |
| mouseLeaveDelay | 鼠标离开时延迟隐藏的时间、单位 | number | - |
| popupStyle | 额外的弹出式 | Object | - |
| prefixCls | 	前缀类名 | String | - |
| popupTransitionName | 与https://github.com/react-component/animate相同 | String | - |
| onPopupVisibleChange | 弹出窗口可见时更改 | Function | - |
| popupVisible | 弹出窗口是否可见 | boolean | - |
| defaultPopupVisible | 弹出窗口最初是否可见 | boolean | - |
| popupAlign | 弹出的对齐配置 | Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) | - |
| popup | 弹出内容 | React.Element | - |
| getPopupContainer | 函数返回将充当弹出容器的html节点 | getPopupContainer(): HTMLElement | - |
| popupPlacement | 	使用来自builtinPlacements的预设弹出对齐配置，<br/>可以通过popupAlign prop合并(left,right,top,bottom,topLeft,topRight,bottomRight,bottomLeft) | string | bottomLeft |
| builtinPlacements | 内置放置对齐贴图。由安置道具使用 | object | - |

### OptGroup props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| label | 组名 | string|React.Element | - |


### Option props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | - |
| title | 选中该 Option 后，Select 的 title | string | - |
| disabled | 组名 | string|React.Element | - |
| value | 默认根据此属性值进行筛选 | string|number | - |
| className | Option 器类名 | string | - |



```jsx
    <MkSelect
        placeholder="请输入内容"
        style={{ width: '100%' }}
    >
        <MkSelect.OptGroup label="Manager">
            <MkSelect.Option value="jack">Jack</MkSelect.Option>
            <MkSelect.Option value="lucy">Lucy</MkSelect.Option>
        </MkSelect.OptGroup>
        <MkSelect.OptGroup label="Engineer">
            <MkSelect.Option value="Yiminghe">yiminghe</MkSelect.Option>
        </MkSelect.OptGroup>
    </MkSelect>
```