MessageBox 弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

WARNING

从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。

消息提示

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

显示代码

确认消息

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

显示代码

提交内容

当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。

显示代码

自定义

可自定义配置不同内容。

显示代码

TIP

弹出层的内容可以是 VNode，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 VNode 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 #8931。当这类问题出现时，解决方案是给 VNode 加上一个不相同的 key，参考这里。

使用 HTML 片段

message 属性支持传入 HTML 片段。

显示代码

DANGER

message 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在 dangerouslyUseHTMLString 打开的情况下，请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。

区分取消与关闭

有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。

显示代码

居中布局

内容支持居中布局

显示代码

全局方法

如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 MessageBox。调用参数为：

• $msgbox(options)
• $alert(message, title, options) 或 $alert(message, options)
• $confirm(message, title, options) 或 $confirm(message, options)
• $prompt(message, title, options) 或 $prompt(message, options)

单独引入

如果单独引入 MessageBox：

import { MessageBox } from 'element-ui';

那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。

Options