mobile-popup组件

弹层容器组件

分类

export { Drawer, Modal, Popover }

Drawer(抽屉组件)

props

| name | description | type | default | 是否为必传| | ---------- | ---------------------------------------- | -------- | ------- |------- | | visible | 展示、隐藏 | boolean | true | 是 | placement | 弹出方向 ：left , right , top , bottom | string | left | 否 | | width | 容器宽度 | string ,number | 百分比 |否| | height | 容器高度 | string ,number | 百分比 |否| | mask | 是否带遮罩 | boolean | true | 否 | | maxHeight | 最大高度 | string | 70% | 否 | onClose | 关闭弹层的回调函数 | function | onClose: () => { } | 否

Modal(对话框)

props

| name | description | type | default | 是否为必传| | ---------- | ---------------------------------------- | -------- | ------- |------- | | visible | 展示、隐藏 | boolean | true | 是 | hasCloseBtn | 是否带有关闭按钮 | boolean | false | 否 | width | 容器宽度 | string ,number | 百分比 |否| | height | 容器高度 | string ,number | 百分比 |否| | mask | 是否带遮罩 | boolean | true | 否 | | maxHeight | 最大高度 | string | 70% | 否 | hasCloseBtn | 是否显示关闭按钮 | boolean | | 否 | onClose | 关闭弹层的回调函数 | function | onClose: () => { } | 否 | maskCls | 自定义遮罩classname | string | 无 | 否 | mainViewCls | 自定义内容container className | string | 无 | 否

Popover(气泡框弹层)

| name | description | type | default | 是否为必传| | ---------- | ---------------------------------------- | -------- | ------- |------- | | visible | 展示、隐藏 | boolean | true | 是 | hasArrow | 是否显示上箭头 | boolean | false | 否 | hotAreaOffset | 触发弹层显示的元素位置信息,一般都是getBoundingClientRect函数的返回值 | object | false | true | mask | 是否带遮罩 | boolean | true | 否 | | style | popover内容的样式 | object | {backgroundColor:'white',width:'60%',maxHeight:'70%',borderRadius:'4px'} | 否 | | maskStyle | 遮罩的样式 | obj | undefined | 否 | | prefixCls | 自定义class | string | phoenix-popup | 否 | getPopoverContainer | 自定义popover渲染到的节点 | () => JSX | undefined | 否 | onClose | 关闭弹层的回调函数 | function | onClose: () => { } | 否