@beisen-phoenix/modal NPM | npm.io

3.3.55 • Published 4 years ago

Install

Weekly downloads

9

License

ISC

Repository

Last release

4 years ago

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

@beisen-phoenix/button @beisen-phoenix/common-translation @beisen-phoenix/common-utils @beisen-phoenix/container @beisen-phoenix/css-var-polyfill @beisen-phoenix/icon @beisen-phoenix/style-token @beisen-phoenix/textarea @beisen-phoenix/tooltip react-transition-group

@infinitebrahmanuniverse/nolb-_beisen-@everything-registry/sub-chunk-118 ux-p-courses-uploader ux-p-manage @recruit-paas/flow-group @recruit-paas/rules-for-recheck-setting @beisen-phoenix/table @beisen-phoenix/table-v2 @beisen-phoenix/react-table @beisen-phoenix/builder-modal @beisen-platform/ux-standard-table @beisen-elearning/ux-p-man-courseware-lib @beisen-elearning/ux-p-man-create-exam @beisen-elearning/ux-p-man-plan-list @beisen-elearning/ux-p-man-plan-phase @beisen-elearning/ux-p-man-plan-trainee @beisen-elearning/ux-p-man-question-bank @beisen-elearning/ux-p-man-question-lib @beisen/ocean-dateset-permission @beisen/ocean-set-display-field @beisen-elearning/cropper-uploader @beisen-elearning/manage-courses-edit @beisen-elearning/manage-courses-list @beisen-elearning/p-manage-course-catalogue @beisen-elearning/p-manage-courses-list @beisen/fast-table @beisen/enhance-modal @beisen-phoenix/lookup @beisen-phoenix/data-table

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago