@beisen-phoenix/modal

模式弹层

API

| 参数 | 说明 | 类型 | 默认值 | | --------------------- | ------------------------------------------------- | ------------------------ | --------- | | visible | 是否显示 | boolean | false | | hasMasker | 是否显示遮罩层 | boolean | true | | maskerClosable | 点击遮罩是否关闭 Modal | boolean | true | | escClosable | 点击 ESC 键是否关闭 Modal | boolean | true | | hideDocsBodyScrollbar | 是否在打开弹层时，隐藏 document.body 的滚动条 | boolean | false | | timeout | 动画执行的最大时间 | number | 300 | | title | 标题 | string / React.ReactNode | - | | confirmText | 确认按钮文字 | string | - | | cancelText | 取消按钮文字 | string | - | | confirmLoading | 确定按钮 loading 状态 | boolean | false | | footer | 自定义底部按钮区域，若传 null 则不显示底部 | React.ReactNode / null | - | | translation | 国际化，详情见下方 | object | - | | onClose | 点击遮罩层或右上角叉叉或按下键盘 ESC 键的回调 | function() | - | | onConfirm | 点击确定按钮的回调 | function(event) | - | | onCancel | 点击取消按钮的回调 | function(event) | - | | afterOpen | 打开之后的回调 | function() | - | | afterClose | 关闭之后的回调 | function() | - | | hasHeader | 是否显示头部 | boolean | true | | extraCls | 自定义组件容器 class,一般用于覆盖组件默认样式使用 | string | - | | size | 弹层大小 可选small large | string | small | | style | 自定义弹层样式 | object | undefined | | lang | 当前语言环境(zh_CN,en_US,zh_TW) | string | zh_CN | 否 |

translation

translation: {
  confirmText: '确定',
  cancelText: '取消'
}

###changelog

2019-11-19

新增 lang 属性，用于表示当前的语言环境，取值范围为“zh_CN,zh_TW,en_US”内部新增中文简体、英文、中文繁体语言包。

2019-09-20 1、新增 height 参数，可以用来控制弹层的高度，内联样式。 2019-08-27 1、新增 hasHeader 参数，用于控制弹窗头部是否显示。 2、在 title 为空的时候不再控制同步是否显示 2019-08-09

Modal.xxx()

2019-06-27 新增 api | extraCls | 自定义组件容器 class,一般用于覆盖组件默认样式使用| string | 无| No | 2019-06-27 移除 api: top left

| size | 弹层大小 可选small large | string | small |

包括：

• Modal.show
• Modal.close

以上均为一个函数，参数为 object，具体属性如下：

| 参数 | 说明 | 类型 | 默认值 | 是否必传 | | --------------------- | ---------------------------------------------------------------- | ------------------------ | ------ | -------- | | id | modal 根节点 id | string | - | | hasMasker | 是否显示遮罩层 | boolean | true | | maskerClosable | 点击遮罩是否关闭 Modal | boolean | true | | escClosable | 点击 ESC 键是否关闭 Modal | boolean | true | | hideDocsBodyScrollbar | 是否在打开弹层时，隐藏 document.body 的滚动条 | boolean | false | | timeout | 动画执行的最大时间 | number | 300 | | title | 标题，不传表示不显示标题 | string / React.ReactNode | - | | confirmText | 确认按钮文字 | string | - | | cancelText | 取消按钮文字 | string | - | | confirmLoading | 确定按钮 loading 状态 | boolean | false | | footer | 自定义底部按钮区域，若传 null 则不显示底部 | React.ReactNode / null | - | | translation | 国际化，详情见上方 | object | - | | onClose | 点击遮罩层或右上角叉叉或按下键盘 ESC 键、调用 Modal.close 的回调 | function(event) | - | | onConfirm | 点击确定按钮的回调 | function(event) | - | | onCancel | 点击取消按钮的回调 | function(event) | - | | afterOpen | 打开之后的回调 | function() | - | | afterClose | 关闭之后的回调 | function() | - |

返回值为一个 object，具体属性如下：

• close : 一个用于关闭当前 dialog 的 function

使用方法：

const modal = Modal.show({ title: "这里是标题" });
modal.close(); // 关闭当前对话框