@beisen-phoenix/unmodeled-layer
使用 rc-trigger 来实现弹框可见性的控制, 包括动画,定位等信息, 封装 rc-trigger,实现自适应位置
API 属性如下:
| 成员 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visible | 是否显示 | boolean | - |
| size | 尺寸大小: small(170px) large(340px) auto(由内容撑开) 不设置默认与 trigger 元素等宽 | string | - |
| width | 自定义大小,优先级低于 size | number | - |
| childMargin | 子组件的外边距 | string | 0px |
| trigger | 触发展示的行为: hover click | string[] | [ 'hover'] |
| footer | 自定义按钮 | object | - |
| autoAdjust | 是否自适应调整位置 | Boolean | true |
| content | 弹窗内容 | ReactNode | - |
| onVisibleChange | 弹层显示状态改变时调用(只有在受控模式下会被调用), 参数为 visible | Function(visible) | - |
| onOk | 如果你使用弹层默认的footer,footer自带的确定按钮的点击回调函数 | Function | - |
| okText | 如果你使用弹层默认的footer,footer自带的确定按钮的文案 | Function | - |
| extraCls | 自定义 class | string | "" |
| blockContainer | 外层容器的显示类型(true 是 block 类型,false 则是 inline-block) | Boolean | false |
| placement | 弹层的显示位置(可选值:topLeft, topRight, bottomRight, bottomLeft) | string | bottomLeft |
| builtinPlacements | 弹层的可定义偏移位置(具体可参考 dom-align) | object | -- |
| getPopupContainer | 弹层挂载的容器 | Function | - |
| destroyPopupOnHide | 隐藏的时候是否销毁节点 | boolean | false |
| forceRender | whether render popup before first show | boolean | false |
| popupAnimation | https://github.com/react-component/animate | String/Object | slide-up |
| mouseLeaveDelay | mouseLeave延迟时间 | number | 0.1 |
| mouseEnterDelay | mouseEnter延迟时间 | number | - |
| mask | 是否显示遮罩 | boolean | false |
| maskClosable | 当mask为true时,设置此只有意义,表示是否允许点击遮罩关闭弹层 | boolean | true |
builtinPlacements 取值举例
{
topLeft: {
points: ['bl', 'tl'],
},
topRight: {
points: ['br', 'tr'],
},
bottomRight: {
points: ['tr', 'br'],
},
bottomLeft: {
points: ['tl', 'bl'],
offset: [-11, -15]
},
}