# Dialog 对话框
模拟系统的消息提示框而实现的一套模态对话框组件

## 何时使用
用于消息提示、确认消息和提交内容。

### 基本示例

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


### 消息提示
当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

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

### 确认消息
提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。

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

### 使用 VNode
`message` 属性支持传入 VNode 片段。

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


### 使用 HTML 片段
`message` 属性支持传入 HTML 片段

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


### 提交内容
提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。

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


### 指定位置
使用`target1` 指定位置

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


### 自定义底部按钮
使用`buttons` 自定义底部按钮

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



## props

| 参数                | 说明                                                                                   | 类型                                                   | 可选值                           | 默认值 |
| ------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------------------------------- | ------ |
| id               | 元素标识                                                                                   | string                                                 | -                                | -      |
| title               | 标题                                                                                   | string                                                 | -                                | -      |
| message             | 内容                                                                                   | string / VNode                                         | -                                | -      |
| message-is-html     | 是否将内容作为 html 展示                                                               | boolean                                                | -                                | false  |
| type                | 内容类型                                                                               | string                                                 | success / info / warning / error | -      |
| closable          | 是否展示关闭按钮                                                                       | boolean                                                | -                                | true   |
| before-close        | Dialog 关闭前的回调，会暂停 Dialog 的关闭                                              | function(done: function), done(boolean) 用于关闭 Modal | -                                | -      |
| lock-scroll         | 显示 Dialog 时是否锁定 body 滚动                                                       | boolean                                                | -                                | true   |
| target         | 将 Dialog 插入到某个节点下                                                       | Element                                                | -                                | document.body   |
| show-cancel-button  | 是否展示取消按钮                                                                     | boolean                                                 | -                                | true   |
| cancel-button-text  | 取消按钮的文本内容                                                                     | string                                                 | -                                | 取消   |
| show-confirm-button  | 是否展示确定按钮                                                                     | boolean                                                 | -                                | true   |
| confirm-button-text | 确定按钮的文本内容                                                                     | string                                                 | -                                | 确定   |
| mask-closable       | 是否可以通过点击遮罩层关闭 Dialog                                                      | boolean                                                | -                                | false  |
| esc-closable        | 是否可以通过  按下 ESC 关闭 Dialog                                                     | boolean                                                | -                                | false  |
| on-cancel           | 取消的回调                                                                             | function  |  -  |false  |
| custom-class           | 自定义类名                                                                             | string/array/object                                               | -                                | -      |
| width           | 对话框宽度                                                                            |     string                                | -                                |  50%   |
| overflow-auto           | 当设置为true时滚动条会根据内容出现                                                                          |     boolean                                | -                       |  true  |
| on-confirm          | 确定的回调，如果此回调返回一个 promise，Dialog 会在 promise resolve 或者 reject 后关闭 | function                                               | -                                | -      |
| input-props         | 绑定到`mm-input`属性对象	                                                         | Object                           | -                                | -     |
| input-default-value | 输入框的初始文本	                                                         | string                           | -                                | -     |
| field-props         | 绑定到`mm-form-field`属性对象	                                                         | Object                           | -                                | -     |
| form-props         | 绑定到`mm-form`属性对象	                                                         | Object                           | -                                | -     |
| buttons         | 自定义底部按钮	                                                         | Array<{onClick:Function,name:string}>，其他参数参考 Button                           | -                                | -     |