# Modal 模态框
模态对话框。

## 何时使用
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。

### 基本使用
第一个模态框。

@[demo](./demo/basic.vue)


### overflow-auto模式
当弹窗内容过多时，我们可以选择内容在弹窗内滚动或者弹窗在弹窗容器中滚动。

@[demo](./demo/overflow-auto.vue)


### 自定义页头页脚
使用`footer`, `header` slot 设置页头页脚

@[demo](./demo/slot.vue)


## props

| 参数          | 说明                                 | 类型                                          | 默认值 | 可选值 |
| ------------- | ------------------------------------ | --------------------------------------------- | ------ | ------ |
| title | Modal 标题内容 |string|-|-|
| visible       | 是否显示 Modal，支持`.sync`修饰符    | boolean                                       | -      | false  |
| width         | Modal 宽度                           | string                                        | -      | 50%    |
| max-height    | Modal 最大高度，当设置此值的时候会自动设置`overflow-auto`为`true` | string           | -      | -      |
| overflow-auto | 当设置为`true`时滚动条会根据内容出现     | boolean                                         | false      | true      |
| top           | Modal CSS 中的`padding-top`值         | string                                        | -      | 15vh   |
| mask          | 是否需要遮罩层                       | boolean                                       | -      | true   |
| lock-scroll   | 是否在 Modal 显示时将 body 滚动锁定  | boolean                                       | -      | true   |
| mask-closable | 是否可以通过点击遮罩层关闭 Modal     | boolean                                       | -      | true   |
| esc-closable  | 是否可以通过  按下 ESC 关闭 Modal    | boolean                                       | -      | true   |
| closable    | 是否  显示关闭按钮                   | boolean                                       | -      | true   |
| before-close  |  关闭前的回调，会暂停 Modal 关闭     | function(done: function), done 用于关闭 Modal | -      | -      |
| center        | 是否水平居中对齐头部和底部                     | boolean                                 | -      | false  |
| custom-class  | Modal 的自定义类名                   | string                                        | -      | -      |

## slots

| name       | 说明             |
| ---------- | ---------------- |
| -          | Modal body 内容  |
| header     | Modal 头部 内容 |
| title | Modal 标题内容 |
| footer     | Modal 操作内容   |

## events

| 事件名称 | 说明             | 回调参数 |
| -------- | ---------------- | -------- |
| close    | Modal 关闭的回调 | -        |
| open     | Modal 打开的回调 | -        |