简单提示模态框组件API

  1.   // 新增节点弹出框内容
  2.    modalContent () {
  3.         return (
  4.             <div className="addModal">
  5.                 {  this.props.form.createForm('form1') }
  7.             </div>
  8.         )
  9.     };
  11. //弹框确定按钮事件
  12. beSureBtnClick= () => {
  14. }
  16. //初始化
  17. render(){
  18.     const {modal } = this.props;
  19.     let { createModal } = modal;
  21.     return(
  22.         <div>
  23.              {createModal('addNode', {
  24.                 title: '新增节点',// 弹框表头信息
  25.                 content: this.modalContent(), //弹框内容，可以是字符串或dom
  26.                 beSureBtnClick: this.beSureBtnClick //点击确定按钮事件
  27.                 cancelBtnClick: this.cancelBtnClick, //取消按钮事件回调
  28.                 closeModalEve: this.closeModalEve, //关闭按钮事件回调
  29.                 userControl:true,  // 点 确定/取消 按钮后，是否自动关闭弹框.true:手动关。false:自动关,默认false
  30.                 size:'lg', //  模态框大小 sm/lg/xlg/xxlg/max 【className为junior/senior/combine和size不要同时配置】 
  31.                 noFooter : false, //是否需要底部按钮,默认有footer,有false,没有true
  32.                 rightBtnName : '取消', //左侧按钮名称,默认‘取消’
  33.                 leftBtnName : '确定', //右侧按钮名称， 默认‘确定’
  34.                 className:'junior', /*
  35.                                简单型junior -> 宽度410PX 高度200PX .【这个暂时别用，简单提示使用promptBox 或者 this.props.ncmodal的createModal】
  36.                                中型senior -> 宽度520PX 高度根据内容自适应，最小值268，最大高度限制420，如modal主体还要承modal主体区出现滚动条  
  37.                                复杂型combine  -> 宽度680PX 高度根据内容自适应，最小值268，最大高度限制570，如modal主体还要承载modal主体区出现滚动条
  38.                                头部和底部固定高度
  39.                                不写的话默认走size设定大小 
  40.                               */
  41.                hasBackDrop:true,//显示遮罩层，显示是true，不显示是false，默认是true
  42.                zIndex:200，//遮罩的层级为zIndex，弹框默认为zIndex+1。默认为200，非比传项
  43.                showCustomBtns:false,//允许自定义footer里的按钮,默认false显示 确定 和 取消 按钮，true是传入自定义的按钮
  44.                customBtns:<div>自定义的一些按钮</div>, //JSX结构，样式需要自己写
  45.                validateCloseBtn:false,//点击关闭按钮的校验,默认是false不校验，校验是true【不校验点击X关闭，校验执行传入的closeModalEve回调】，配置为true的时候esc不关闭
  46.                hideRightBtn,//隐藏足部右边的按钮，默认是false不隐藏，隐藏是true
  47.                hideLeftBtn,//隐藏足部左边的按钮，默认是false不隐藏，隐藏是true
  48.                keyboard,//esc关闭modal，默认true
  49.                bodyHeight,//modalbody的高度，用于定制modal的高度，如果用了此高度，size和classname的配置都会无法使用
  50.             })}
  51.         </div>
  52.     )
  54. }
  56. 模态框显示  使用方法：
  57.    props.modal.show('addNode');
  60. 注意：
  61. 在show的时候传的值，无论是内容还是标题，都需要在数据回来之后再传进去，否则组件接收不到；可以做同步操作，数据拿到之后再show。
  62. createModal传值在render里，可以接收到异步数据会再次render。
  63. 事件只在show或者createModal时候传入，冲突的话会执行show传入的
方法 参数说明 名称
createModal(id,{title, content, beSureBtnClick, leftBtnName, rightBtnName, noFooter,size,userControl}) id:模态框的id(string)
;title:表头(string)；
content:弹框内容；
beSureBtnClick:确定按钮事件；
leftBtnName:左边按钮名称(string)；
rightBtnName：右侧按钮名称（string）
;noFooter:是否需要底部按钮，默认false，显示； true:不显示按钮		 创建弹框组件
show(id, config , showCallback) id:模态框的id(string)；config:与createModal时传的参数可以后续传入；showCallback显示的回调函数 显示弹出框
close(id) 关闭弹出框

3. API

3.1 createModal config 参数

参数 说明 类型 默认值 备注
title modal 标题 dom/string
content modal 内显示的内容 dom/string
beSureBtnClick 确定按钮事件回调 function
cancelBtnClick 取消按钮事件回调 function
closeModalEve 关闭按钮事件回调 function
leftBtnName 左侧按钮名称 string 确定
rightBtnName 右侧按钮名称 string 取消
noFooter 是否需要 modal 底部(会把确定取消按钮去掉) boolean false
size sm/lg/xlg/xxlg/max string lg 此属性不准和 classname 的’senior’和’combine’共同使用
userControl 点 确定/取消 按钮后，是否自动关闭模态框 string false
className modal 样式 string ‘’ 这几个 class 是控制 size 大小的 ：’senior’（宽度 520PX 高度根据内容自适应，最小值 268，最大高度限制 420），’combine’（宽度 680PX 高度根据内容自适应，最小值 268，最大高度限制 570）这两个不准和 size 共同使用
backdropClassName 遮罩层样式 string ‘’
zIndex 层级 number 200 遮罩的层级为 zIndex，弹框默认为 zIndex+1。默认为 200
hasBackDrop 是否有遮罩层 boolean true
closeByClickBackDrop 是否点击遮罩关闭提示框 boolean true
showCustomBtns 是否自定义底部按钮（与 customBtns 配合使用） boolean false
customBtns 自定义底部按钮 dom（与 showCustomBtns 配合使用） dom 格式：
自定义的一些按钮
validateCloseBtn 点击关闭 X 按钮的校验 boolean false
showCustomBtns 自定义底部按钮 boolean false
hideRightBtn 隐藏底部右边的按钮 boolean false
hideLeftBtn 隐藏底部左边的按钮 boolean false
container 模态框所在容器 dom document.body
draggable 是否可以拖拽 boolean true
resizable 是否可以放大缩小 boolean true
keyboard 配置键盘 esc 键是否关闭 modal boolean true
bodyHeight modalbody 的高度 string 如果用了此高度，size 和 classname 的配置都会无法使用

3.2 api

方法 说明 参数:说明-类型-默认值 返回值 备注
createModal(id,config) 创建模态框 参数说明详见上表格
show(id) 显示模态框 id:模态框的 id-string-无
close(id) 关闭模态框 id:模态框的 id-string-无

4. 注意事项

使用模态框拖拽功能时，如果 Header 内有绑定事件的元素，需要添加一个 className=”dnd-cancel”，才能正常触发相应事件。 具体实现代码如下

<Modal.Title>
    <Checkbox
        className="dnd-cancel"
        checked="{this.state.checked}"
        onChange="{this.changeCheck}"
    >
        可勾选的标题
    </Checkbox>
</Modal.Title>

5. 组件更新日志