@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(); // 关闭当前对话框