Dialog 弹出框
弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。支持组件调用和函数调用两种方式。
函数调用
为了便于使用 Dialog，Green UI 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的弹窗组件。
比如使用 showDialog 函数，调用后会直接在页面中渲染对应的弹出框。
消息提示
用于提示一些消息，默认只包含一个确认按钮。
消息确认
用于确认消息，默认包含确认和取消按钮。
圆角按钮风格
将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。
异步关闭
通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。
使用 Dialog 组件
如果你需要在 Dialog 内嵌入组件或其他自定义内容，可以直接使用 Dialog 组件，并使用默认插槽进行定制。使用前需要通过 app.use 等方式注册组件。
API
方法
Vant 中导出了以下 Dialog 相关的辅助函数：
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| showDialog | 展示消息提示弹窗，默认包含确认按钮 | options: DialogOptions | Promise<void> |
| showConfirmDialog | 展示消息确认弹窗，默认包含确认和取消按钮 | options: ConfirmDialogOptions | Promise<void> |
| closeDialog | 关闭弹窗 | - | - |
| setDefaultOptions | 修改默认配置，影响所有的 showDialog 调用 | options: DialogOptions | - |
| resetDefaultOptions | 重置默认配置，影响所有的 showDialog 调用 | - | - |
DialogOptions
调用 showDialog 等方法时，支持传入以下选项：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 弹窗标题 | string | - |
| width | 弹窗宽度，单位为 px | number | 320 |
| message | 弹窗内容 | string | - |
| theme | 弹窗主题，可选值为 default round-button | string | default |
| messageAlign | 弹窗内容对齐方式，可选值为 left center right | string | center |
| className | 自定义弹窗类名 | string | - |
| showConfirmButton | 是否显示确认按钮 | boolean | true |
| showCancelButton | 是否显示取消按钮 | boolean | false |
| confirmButtonText | 确认按钮文字 | string | 确认 |
| confirmButtonColor | 确认按钮颜色 | string | #ee0a24 |
| confirmButtonDisabled | 确认按钮是否禁用 | boolean | false |
| cancelButtonText | 取消按钮文字 | string | 取消 |
| cancelButtonColor | 取消按钮颜色 | string | #000 |
| cancelButtonDisabled | 取消按钮是否禁用 | boolean | false |
| overlay | 是否显示遮罩层 | boolean | true |
| overlayClass | 自定义遮罩层类名 | string | - |
| overlayStyle | 自定义遮罩层样式 | CSSProperties | - |
| lockScroll | 是否锁定背景滚动 | boolean | true |
| allowHtml | 是否允许渲染 HTML 内容 | boolean | false |
| beforeClose | 关闭弹窗前的回调函数，返回 false 可阻止弹窗关闭 | `(action: 'confirm' | 'cancel') => boolean |
| transition | 弹出动画效果，可选值为 fade slide-up slide-down slide-left slide-right | string | fade |
| teleport | 指定弹出位置，可选值为 body parent viewport | string | body |
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model:show | 是否显示弹窗 | boolean | false |
| title | 弹窗标题 | string | - |
| width | 弹窗宽度，单位为 px | number | 320 |
| message | 弹窗内容 | string | - |
| theme | 弹窗主题，可选值为 default round-button | string | default |
| message-align | 弹窗内容对齐方式，可选值为 left center right | string | center |
| show-confirm-button | 是否显示确认按钮 | boolean | true |
| show-cancel-button | 是否显示取消按钮 | boolean | false |
| confirm-button-text | 确认按钮文字 | string | 确认 |
| confirm-button-color | 确认按钮颜色 | string | #ee0a24 |
| confirm-button-disabled | 确认按钮是否禁用 | boolean | false |
| cancel-button-text | 取消按钮文字 | string | 取消 |
| cancel-button-color | 取消按钮颜色 | string | #000 |
| cancel-button-disabled | 取消按钮是否禁用 | boolean | false |
| overlay | 是否显示遮罩层 | boolean | true |
| overlay-class | 自定义遮罩层类名 | string | - |
| overlay-style | 自定义遮罩层样式 | CSSProperties | - |
| lock-scroll | 是否锁定背景滚动 | boolean | true |
| allow-html | 是否允许渲染 HTML 内容 | boolean | false |
| before-close | 关闭弹窗前的回调函数，返回 false 可阻止弹窗关闭 | `(action: 'confirm' | 'cancel') => boolean |
| transition | 弹出动画效果，可选值为 fade slide-up slide-down slide-left slide-right | string | fade |
| teleport | 指定弹出位置，可选值为 body parent viewport | string | body |
Dialog Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| confirm | 点击确认按钮时触发 | - |
| cancel | 点击取消按钮时触发 | - |
| open | 打开弹窗时触发 | - |
| close | 关闭弹窗时触发 | - |
| opened | 打开动画结束时触发 | - |
| closed | 关闭动画结束时触发 | - |
Dialog Slots
| 名称 | 说明 |
|---|---|
| default | 弹窗内容 |
| title | 弹窗标题 |
| footer | 弹窗按钮组 |