Message Box #

A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.

Alert #

Alert interrupts user operation until the user confirms.

Confirm #

Confirm is used to ask users' confirmation.

Prompt #

Prompt is used when user input is required.

Use VNode #

message can be VNode.

Customization #

Can be customized to show various content.

Use HTML String #

message supports HTML string.

Distinguishing cancel and close #

In some cases, clicking the cancel button and close button may have different meanings.

Centered content #

Content of MessageBox can be centered.

Customized Icon #

The icon can be customized to any Vue component or render function (JSX).

Draggable #

MessageBox can be draggable.

Global method #

If Element Plus is fully imported, it will add the following global methods for app.config.globalProperties: $msgbox, $alert, $confirm and $prompt. So in a Vue instance you can call MessageBox like what we did in this page. The parameters are:

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

App context inheritance > 2.0.4 #

Now message box accepts a context as second (forth if you are using message box variants) parameter of the message constructor which allows you to inject current app's context to message which allows you to inherit all the properties of the app.

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)

Local import #

If you prefer importing MessageBox on demand:

import { ElMessageBox } from 'element-plus'

The corresponding methods are: ElMessageBox, ElMessageBox.alert, ElMessageBox.confirm and ElMessageBox.prompt. The parameters are the same as above.

API #

Options #