# @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

使用方法：

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