## Dialog 弹出框 ### 使用指南 ```js import { Dialog } from 'vant'; ``` ### 代码演示 #### 消息提示 用于提示一些消息，只包含一个确认按钮 :::demo 消息提示 ```html Alert 无标题 Alert ``` ```javascript export default { methods: { onClickAlert() { Dialog.alert({ title: '标题', message: '弹窗内容' }).then(() => { // on close }); }, onClickAlert2() { Dialog.alert({ message: '弹窗内容' }).then(() => { // on close }); } } }; ``` ::: #### 消息确认 用于确认消息，包含取消和确认按钮 :::demo 消息确认 ```html Confirm ``` ```javascript export default { methods: { onClickConfirm() { Dialog.confirm({ title: '标题', message: '弹窗内容' }).then(() => { // on confirm }).catch(() => { // on cancel }); } } }; ``` ::: ### 方法 | 方法名 | 参数 | 返回值 | 介绍 | |-----------|-----------|-----------|-------------| | Dialog.alert | options | `Promise` | 展示消息提示弹窗 | | Dialog.confirm | options | `Promise` | 展示消息确认弹窗 | | Dialog.close | - | `void` | 关闭弹窗 | ### Options | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | title | 标题 | `String` | | | | message | 内容 | `String` | | | | showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | | | showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | | | confirmButtonText | 确认按钮的文案 | `String` | `确认` | | | cancelButtonText | 取消按钮的文案 | `String` | `取消` | | | overlay | 是否展示蒙层 | `Boolean` | `true` | | | closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | | | lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | |