maycur-business/lib/MkDropdown/README.md

maycur business react components of web

#### MkDropdown下拉菜单

## 何时使用

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。MkDropdown跟antd的Dropdown的性质不太一样, 不对overlay里面的元素做强绑定，只不过会对ul以及li做一些样式的默认设定，也可以
自己定制化，因为是覆盖，所以按钮的行高, padding会影响弹框的布局，所以特意加了left, top来对弹框加上自定义配置，另外反向可能会存在误差(大概2px左右)，如果有误差的话可以可以设deviation为true，默认是true, 传test会对所有的Dropdown包括自身的ul, li的背景色做transparent处理，并且默认open, 所以调试最好传test, 务必让上下文字不留缝隙对齐

## API

按钮的属性说明如下：

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | - |
| open | 菜单是否显示 | boolean | - |
| position | 指定将工具提示放在元素上的方向。添加后缀-start或-end移动位置。top-end就是一个例子。top bottom left right | string | 'bottom' |
| trigger | 触发下拉的行为 mouseenter focus click manual| string | 'mouseenter focus' |
| delay | 指定触发事件的工具提示显示后需要多长时间。| number | 0 |
| hideDelay | 指定在触发假事件以隐藏工具提示后需要多长时间。单击文档以隐藏工具提示时不适用。| number | 0 |
| duration | 指定显示工具提示时转换动画完成所需的时间。| number | 0 |
| animation | 指定工具提示具有的过渡动画的类型。shift perspective fade scale none| string | 'shift' |
| distance | 指定工具提示与其元素的距离| number | 0 |
| stickyDuration | 当popper的位置随其元素移动而更新时，指定“平滑”过渡。| number | 0 |
| offset | 在相反的轴上偏移工具提示。对于位置顶部和底部，它充当offsetX。对于左右位置，它作为offsetY。| number或者string | 0 |
| followCursor | 指定是否跟随用户的鼠标光标（仅限鼠标设备）| boolean | false |
| inertia | 使用三次贝塞尔曲线修改transition-timing-function以创建“弹弓”的惯性效果| boolean | false |
| boundariesElement | 修饰符使用的边界。可以是scrollParent，window，viewport或者任何DOM元素| string或者HTMLElement | 'window' |
| left | 弹框偏左位移 | number | 0 |
| top | 弹框偏上位移 | number | 0 |
| onUpdate | 更新popper时调用回调。在初始化/创建popper时不会调用此回调，但仅在后续更新时调用。返回一个data参数。用data.instance。访问Popper.js实例。 | fuc | - |
| onCreate | 创建popper时调用回调。返回一个data参数。用data.instance。访问Popper.js实例。 | fuc | - |
| overlay | 菜单 | HTMLElement | - |
| test | 开发测试使用 | boolean | false |
| deviation | 误差 | boolean | true |
| className | 弹框className名 | string | - |
| style | 弹框style名 | object | - |
| tippyRef | ref映射, 可以通过调用tippyRef回调调用hideTooltip方法来手动隐藏弹框 | fuc | - |
| autoHide | 设为true所有弹框会点击关闭 | false | - |

``` jsx

const menu = (
  <ul>
    <li>Hover me</li>
    <li>Hover me</li>
    <li>Hover me</li>
    <li>Hover me</li>
  </ul>
);
    <MkDropdown overlay={menu} top={-11}>
        <a href="#">
        Hover me
        </a>
    </MkDropdown>
```