模态框 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，升级为用友红色主题
      • 

    

    
                    
    
                
    • 
            
        



    






    







    
        
         







                

            

            

                

    

        

            

                相关资源
            

            
        

        

            

                社区
            

            
        

        

            

                帮助
            

            
        

        

            

                联系我们
            

            
    
                
  • 
                     北京市海淀区北清路68号用友产业园
    • 
                
  • 
                     guoyff@yonyou.com
    • 
            

        

    

    

        

            

        

        

            

                
版权所有：用友网络科技股份有限公司 2017 京ICP备05007539号-7 京ICP证100714号 京公网安备1101080209224号

                
Powered by yonyou