模态框 Modal
模态框(Modal)是覆盖在父窗体上的子窗体,位于页面最上层。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互,如查看、创建、编辑、向导等。
何时使用
代替原生 dialog
如何使用
import { Modal } from 'tinper-bee';
or
import Modal from 'bee-modal';
import 'bee-modal/build/Modal.css';
能力特性
API
Modal
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
backdrop | 是否弹出遮罩层 | boolean | true |
backdropClosable | 遮罩层点击是否触发关闭 | boolean | true |
centered | 垂直居中展示 Modal (2.0.21+版本) | boolean | false |
keyboard | esc触发关闭 | boolean | - |
animation | 显隐时是否使用动画 | boolean | true |
dialogComponentClass | 传递给模态框使用的元素 | string/element | - |
dialogClassName | 传递给模态框的样式 | class | - |
autoFocus | 自动设置焦点 | boolean | true |
enforceFocus | 防止打开时焦点离开模态框 | boolean | - |
show | 是否打开模态框 | boolean | - |
width | 模态框宽度,如只传数字则会拼接默认单位 px 。例如 100px/100/100%/100rem/100em |
string/number | - |
onHide | 关闭时的钩子函数 | function | - |
size | 模态框尺寸 | sm/lg/xlg | - |
onEnter | 开始显示时的钩子函数 | function | - |
onEntering | 显示时的钩子函数 | function | - |
onEntered | 显示完成后的钩子函数 | function | - |
onExit | 隐藏开始时的钩子函数 | function | - |
onExiting | 隐藏进行时的钩子函数 | function | - |
onExited | 隐藏结束时的钩子函数 | function | - |
container | 容器 | DOM元素/React组件/或者返回React组件的函数 | - |
onShow | 当模态框显示时的钩子函数 | function | - |
renderBackdrop | 返回背景元素的函数 | function | - |
onEscapeKeyUp | 响应ESC键时的钩子函数 | function | - |
onBackdropClick | 点击背景元素的函数 | function | - |
backdropStyle | 添加到背景元素的style | object | - |
backdropClassName | 添加到背景元素的class | string | - |
transition | 动画组件 | function | - |
dialogTransitionTimeout | 设置动画超时时间 | function | - |
backdropTransitionTimeout | 设置背景动画超时时间 | function | - |
manager | 管理模态框状态的组件 | required | - |
draggable | 设置模态框是否可拖拽 | bool | false |
resizable | 设置模态框是否可resize | bool | false |
resizeClassName | 设置拖拽dom的class名称 | string | - |
onResizeStart | resize开始时的回调 | function | - |
onResize | resize时的回调 | function | - |
onResizeStop | resize结束时的回调 | function | - |
minWidth | resize时模态框的最小宽度 | number/string | 200 |
minHeight | resize时模态框的最小高度 | number/string | 150 |
maxWidth | resize时模态框的最大宽度 | number/string | - |
maxHeight | resize时模态框的最大高度 | number/string | - |
bounds | 设置拖拽范围,可输入{top:xxx,bottom:xxx,left:xxx,right:xxx}或者选择器(例如 "#app") | object/string | null |
needScroll | 是否需要记录scrollY的位置并在关闭时滚动到指定位置,适用于不设置container 且出现打开模态框滚动到最顶部的问题时 |
bool/number | false |
Modal.Header
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
closeButton | 是否显示关闭按钮 | boolean | false |
renderCloseButton | 自定义关闭按钮的钩子函数,closeButton设置为 true 时有效 | () => React.Node | - |
closeButtonProps | 自定义关闭按钮的 props | object | - |
Modal.method()
包括:
Modal.info
Modal.success
Modal.error
Modal.warning
Modal.confirm
以上均为一个函数,参数为 object,具体属性如下:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
cancelText | 取消按钮文字 | string | 取消 |
okText | 确认按钮文字,建议使用locale 控制按钮文字 |
string | 确定 |
okType | 确认按钮类型,取值范围(primary/secondary/success/info/warning/danger/dark/light) | string | primary |
title | 标题 | string/ReactNode | - |
content | 内容 | string/ReactNode | - |
className | 容器类名 | string | - |
icon | 自定义图标 | ReactNode | <Icon type="uf-qm-c"/> |
backdrop | 是否弹出遮罩层/点击遮罩层是否触发关闭 | boolean/"static" | true |
width | 宽度 | string/number | 400 |
onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | - |
onOk | 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | - |
locale | 按钮文字,默认中文。okText优先级要高于locale ,建议使用locale 控制按钮文字 |
object | {'ok':'确定','gotit':'知道了','cancel':'取消',} |
以上函数调用后,会返回一个引用,可以通过该引用更新和关闭弹窗。
const modal = Modal.info();
modal.update({
title: '修改的标题',
content: '修改的内容',
});
modal.destroy();
Modal.destroyAll
使用 Modal.destroyAll() 可以销毁弹出的确认窗(即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm)。通常用于路由监听当中,处理路由前进、后退不能销毁确认对话框的问题,而不用各处去使用实例的返回值进行关闭(modal.destroy() 适用于主动关闭,而不是路由这样被动关闭)
import { browserHistory } from 'react-router';
// router change
browserHistory.listen(() => {
Modal.destroyAll();
});
已支持的键盘操作
按键 | 功能 |
---|---|
esc | 关闭模态框 |
注意事项
- 使用模态框拖拽功能时,如果 Header 内有绑定事件的元素,需要添加一个 className="dnd-cancel",才能正常触发相应事件。
- 具体实现代码如下:
<Modal.Title> <Checkbox className="dnd-cancel" checked={this.state.checked} onChange={this.changeCheck} > 可勾选的标题 </Checkbox> </Modal.Title>
更新日志
-
v2.2.3 2020-08-06 ( release地址 )
-
v2.2.2 2020-08-05 ( release地址 )
-
v2.2.1 2020-07-31 ( release地址 )
-
v2.2.0 2020-07-30 ( release地址 )
-
v2.1.12 2020-03-26 ( release地址 )
- bee-modal @2.1.12
- [ Fixbug ] Confirm 按esc不触发close事件。
- bee-modal @2.1.12
-
v2.1.6 2020-02-15 ( release地址 )
- bee-modal @2.1.6
- [ Fixbug ] 修复 container 设置无效问题。
- bee-modal @2.1.6
-
v2.1.5 2019-12-18 ( release地址 )
- bee-modal @2.1.5
- [ Feature ]增加 closeButtonProps 关闭按钮的自定义 props。
- [ Feature ]增加 renderCloseButton 自定义关闭按钮的钩子函数。
- bee-modal @2.1.5
-
v2.1.1 2019-09-16 ( release地址 )
- bee-modal @2.1.1
- [Feature]modal静态方法支持设置 backdropClose、centered 参数。
- bee-modal @2.1.1
-
v2.1.0 2019-09-02 ( release地址 )
- bee-modal @2.1.0
- [Update]当弹框留在可视区的宽度小于 50px 时,拖拽不生效,避免无法拖回的情况。
- bee-modal @2.1.0
-
v2.0.22 2019-08-20 ( release地址 )
- bee-modal @2.0.22
- [ Fixbug ]解决了Modal.info success 等方法点击遮罩层无法关闭。
- bee-modal @2.0.22
-
v2.0.21 2019-07-30 ( release地址 )
- bee-modal @2.0.21
- [Fixbug]居中显示的 Modal,拖拽改变大小时,上下同时变大的问题。
- bee-modal @2.0.21
-
v2.0.20 2019-07-11 ( release地址 )
- bee-modal @2.0.20
- [Fixbug]解决点击模态框 Header 区域,产生错位的问题。
- [Feature]提供 centered 属性,支持垂直居中展示 Modal。
- bee-modal @2.0.20
-
v2.0.10 2019-05-14 ( release地址 )
- bee-modal @2.0.10
- [ Feature ] bee-modal组件,新增了设置拖拽容器class样式的功能
- bee-modal @2.0.10
-
v2.0.9 2019-05-10 ( release地址 )
- bee-modal @2.0.9
- [Feature]error语义模态框图标换为uf-exc-c
- bee-modal @2.0.9
-
v2.0.8 2019-04-25 ( release地址 )
- bee-modal @2.0.8
- [FixBug]解决控制台打印warning的问题
- bee-modal @2.0.8
-
v2.0.7 2019-04-24 ( release地址 )
- bee-modal @2.0.7
- [FixBug]解决单独使用Modal组件时,报错:React is not define 的问题
- bee-modal @2.0.7
-
v2.0.6 2019-04-24 ( release地址 )
- bee-modal @2.0.6
- [ Feature ] 新增了宽高拖拽resize功能
- bee-modal @2.0.6
-
v2.0.5 2019-04-10 ( release地址 )
- bee-modal @2.0.5
- [Feature]字体颜色统一为#212121
- [Feature]图标字体的font-weight改为500
- [Feature]标题和正文部分间距增加到8px
- bee-modal @2.0.5
-
v2.0.4 2019-04-08 ( release地址 )
- [Feature]bee-modal @2.0.4,提供Modal.method(),支持使用API的方式调用组件
-
v2.0.3 2019-04-04 ( release地址 )
- [Feature]bee-modal @2.0.3
- 增加draggable参数支持可拖拽能力
- [Feature]bee-modal @2.0.3
-
v2.0.1 2019-04-02 ( release地址 )
- [Feature]bee-modal @2.0.1
- 关闭图标颜色改为#505F79
- 模态框box-shadow改为:0 4px 6px Rgba(23, 43, 77, .3)
- 模态框border样式改为:1px solid Rgba(9, 30, 68, 0.08)
- 模态框modal-body中的文字大小改为12px
- [Feature]bee-modal @2.0.1
-
v2.0.0 2019-04-02 ( release地址 )
- [Feature]bee-modal @2.0.0,升级为用友红色主题