消息弹出框 ​

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

消息提示 ​

消息提示，用于在用户执行操作时，中断其当前操作，直至用户确认知晓。

确认消息 ​

确认消息用于询问用户是否确认执行某项操作。

提交内容 ​

当需要用户输入时，可以使用提交内容的弹框。

使用 VNode ​

message 属性支持传入 VNode。

自定义 ​

可自定义消息弹窗的样式，以满足各种需求。

使用 HTML 片段 ​

message 属性支持 HTML 片段。

区分取消与关闭 ​

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

内容居中 ​

MessageBox 的内容可以居中。

自定义图标 ​

图标可以自定义为任意 Vue 组件或渲染函数 (JSX)。

可拖拽 ​

MessageBox 是可以拖拽的。

全局方法 ​

如果 Element Plus 被完整引入，它会为 app.config.globalProperties 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。 因此在 Vue 实例中可以像本页面一样调用 MessageBox。 参数如下：

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

应用上下文继承 > 2.0.4 ​

现在 message box 接受一个 context 作为消息构造函数的第二个参数（如果你使用的是 message box 的变体，则是第四个参数），它允许你将当前应用的上下文注入到消息中，这样就可以继承应用的所有属性。

import { getCurrentInstance } from 'vue'
import { ElMessageBox } from 'element-plus'

// in your setup method
const { appContext } = getCurrentInstance()!
// You can pass it like:
ElMessageBox({}, appContext)
// or if you are using variants
ElMessageBox.alert('Hello world!', 'Title', {}, appContext)

局部导入 ​

如果你更倾向于按需引入 MessageBox：

import { ElMessageBox } from 'element-plus'

对应的方法是: ElMessageBox, ElMessageBox.alert, ElMessageBox.confirm 和 ElMessageBox.prompt. 参数与上述相同。

API ​

配置项 ​

来源 ​

组件 • 样式 • 文档

贡献者 ​