模态框 Modal
issue

模态框(Modal)是覆盖在父窗体上的子窗体,位于页面最上层。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互,如查看、创建、编辑、向导等。

何时使用

代替原生 dialog

如何使用

import { Modal } from 'tinper-bee';

or

import Modal from 'bee-modal';
import 'bee-modal/build/Modal.css';

能力特性

API

参数 说明 类型 默认值
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.4 2020-08-15 ( release地址 )

    Features

    • confirm字体改为12px (476457b)
  • v2.2.3 2020-08-06 ( release地址 )

    
                        
  • v2.2.2 2020-08-05 ( release地址 )

    
                        
  • v2.1.19 2020-07-31 ( release地址 )

    Bug Fixes

    • confirm 支持配置拖拽 (74375af)
  • v2.2.1 2020-07-31 ( release地址 )

    
                        
  • v2.1.16 2020-07-30 ( release地址 )

    Bug Fixes

    • 去掉 pointer-events 影响 (f086dd8)
  • v2.2.0 2020-07-30 ( release地址 )

    
                        
  • v2.1.18 2020-07-07 ( release地址 )

    Features

    • needScroll支持传入number类型的值 (ad6c103)
  • v2.1.17 2020-07-07 ( release地址 )

    Bug Fixes

    • 去掉 pointer-events 影响 (f086dd8)

    Features

    • 新增needScroll属性,解决打开模态框滚动到最顶部的问题 (7589392)
  • v2.1.15 2020-04-24 ( release地址 )

    Bug Fixes

  • v2.1.12 2020-03-26 ( release地址 )

    • bee-modal @2.1.12
      • [ Fixbug ] Confirm 按esc不触发close事件。
  • v2.1.6 2020-02-15 ( release地址 )

    • bee-modal @2.1.6
      • [ Fixbug ] 修复 container 设置无效问题。
  • v2.1.5 2019-12-18 ( release地址 )

    • bee-modal @2.1.5
      • [ Feature ]增加 closeButtonProps 关闭按钮的自定义 props。
      • [ Feature ]增加 renderCloseButton 自定义关闭按钮的钩子函数。
  • v2.1.1 2019-09-16 ( release地址 )

    • bee-modal @2.1.1
      • [Feature]modal静态方法支持设置 backdropClose、centered 参数。
  • v2.1.0 2019-09-02 ( release地址 )

    • bee-modal @2.1.0
      • [Update]当弹框留在可视区的宽度小于 50px 时,拖拽不生效,避免无法拖回的情况。
  • v2.0.22 2019-08-20 ( release地址 )

    • bee-modal @2.0.22
      • [ Fixbug ]解决了Modal.info success 等方法点击遮罩层无法关闭。
  • v2.0.21 2019-07-30 ( release地址 )

    • bee-modal @2.0.21
      • [Fixbug]居中显示的 Modal,拖拽改变大小时,上下同时变大的问题。
  • v2.0.20 2019-07-11 ( release地址 )

    • bee-modal @2.0.20
      • [Fixbug]解决点击模态框 Header 区域,产生错位的问题。
      • [Feature]提供 centered 属性,支持垂直居中展示 Modal。
  • v2.0.10 2019-05-14 ( release地址 )

    • bee-modal @2.0.10
      • [ Feature ] bee-modal组件,新增了设置拖拽容器class样式的功能
  • v2.0.9 2019-05-10 ( release地址 )

    • bee-modal @2.0.9
      • [Feature]error语义模态框图标换为uf-exc-c
  • v2.0.8 2019-04-25 ( release地址 )

    • bee-modal @2.0.8
      • [FixBug]解决控制台打印warning的问题
  • v2.0.7 2019-04-24 ( release地址 )

    • bee-modal @2.0.7
      • [FixBug]解决单独使用Modal组件时,报错:React is not define 的问题
  • v2.0.6 2019-04-24 ( release地址 )

    • bee-modal @2.0.6
      • [ Feature ] 新增了宽高拖拽resize功能
  • v2.0.5 2019-04-10 ( release地址 )

    • bee-modal @2.0.5
      • [Feature]字体颜色统一为#212121
      • [Feature]图标字体的font-weight改为500
      • [Feature]标题和正文部分间距增加到8px
  • 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参数支持可拖拽能力
  • 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
  • v2.0.0 2019-04-02 ( release地址 )

    • [Feature]bee-modal @2.0.0,升级为用友红色主题