Message Box 消息弹出框
模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
提示
MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。
import { MessageBox } from '@szhn/dh-design-pc'消息提示
调用 MessageBox.alert 方法以打开 alert 框。它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。
确认消息
调用 MessageBox.confirm 以打开确认框，通过 type 字段展示不同的状态图标。
提交内容
调用 MessageBox.prompt 打开输入框。可使用 inputPattern 校验输入，inputValidator 自定义校验函数。
使用 VNode
message 支持传入 VNode；当内容中包含响应式状态时，建议传入返回 VNode 的函数。
个性化
直接调用 MessageBox 方法并传入 options，可以对标题、按钮文案、按钮样式等进行完全自定义，同时支持通过 beforeClose 在关闭前执行逻辑。
使用 HTML 片段
将 dangerouslyUseHTMLString 设置为 true 可将 message 作为 HTML 片段渲染。
区分取消与关闭
默认情况下，点击取消按钮与关闭图标都会进入相同的拒绝分支。设置 distinguishCancelAndClose 后，可区分两种操作。
内容居中
将 center 设置为 true 即可让弹框内容居中展示。
自定义图标
可通过 icon 传入任意 Vue 组件或 JSX 渲染函数，覆盖默认状态图标。
可拖放
设置 draggable 为 true 开启弹框拖拽能力。
全局方法
如果完整注册了组件库，实例上可直接使用 $msgbox、$alert、$confirm 与 $prompt。
应用上下文继承
MessageBox 支持在构造方法的第二个参数（变体方法为第四个参数）中传入 appContext，以继承当前应用上下文。
import { getCurrentInstance } from 'vue'
import { MessageBox } from '@szhn/dh-design-pc'
const { appContext } = getCurrentInstance()!
MessageBox({}, appContext)
MessageBox.alert('Hello DHdesign', '提示', {}, appContext)按需引入
import { MessageBox } from '@szhn/dh-design-pc'
MessageBox.alert('操作成功', '提示')
MessageBox.confirm('确认删除该记录？', '警告')
MessageBox.prompt('请输入备注', '提示')API
配置项（部分）
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string | '' |
| message | 正文内容 | string / VNode / Function | — |
| type | 消息类型（用于图标） | success / warning / info / error | '' |
| icon | 自定义图标 | string / Component | — |
| showCancelButton | 是否显示取消按钮 | boolean | false |
| showConfirmButton | 是否显示确定按钮 | boolean | true |
| confirmButtonText | 确定按钮文本 | string | 确定 |
| cancelButtonText | 取消按钮文本 | string | 取消 |
| beforeClose | 关闭前回调 | Function | null |
| distinguishCancelAndClose | 区分取消与关闭 | boolean | false |
| center | 是否居中 | boolean | false |
| draggable | 是否可拖动 | boolean | false |
| dangerouslyUseHTMLString | 是否解析 HTML | boolean | false |
| showInput | 是否显示输入框 | boolean | false |
| inputPattern / inputValidator / inputErrorMessage | 输入校验 | — | — |
方法
| 名称 | 说明 |
|---|---|
| MessageBox.alert(message, title?, options?) | 打开 alert 框 |
| MessageBox.confirm(message, title?, options?) | 打开确认框 |
| MessageBox.prompt(message, title?, options?) | 打开输入框 |
| MessageBox.close() | 关闭当前打开的 MessageBox |
更多配置参见 Element Plus MessageBox。