Message

Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.

Basic usage

Displays at the top, and disappears after 3 seconds.

Types

Used to show the feedback of Success, Warning, Message and Error activities.

Closable

A close button can be added.

Centered text

Use the center attribute to center the text.

Use HTML string

message supports HTML string.

WARNING

Although message property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. So when dangerouslyUseHTMLString is on, please make sure the content of message is trusted, and never assign message to user-provided content.

Global method

Element Plus has added a global method $message for app.config.globalProperties. So in a vue instance you can call Message like what we did in this page.

Local import

import { ElMessage } from 'element-plus'

In this case you should call ElMessage(options). We have also registered methods for different types, e.g. ElMessage.success(options). You can call ElMessage.closeAll() to manually close all the instances.

Options

AttributeDescriptionTypeAccepted ValuesDefault
messagemessage textstring / VNode
typemessage typestringsuccess/warning/info/errorinfo
icon-classcustom icon's class, overrides typestring
dangerouslyUseHTMLStringwhether message is treated as HTML stringbooleanfalse
custom-classcustom class name for Messagestring
durationdisplay duration, millisecond. If set to 0, it will not turn off automaticallynumber3000
show-closewhether to show a close buttonbooleanfalse
centerwhether to center the textbooleanfalse
on-closecallback function when closed with the message instance as the parameterfunction
offsetset the distance to the top of viewportnumber20

Methods

Message and this.$message returns the current Message instance. To manually close the instance, you can call close on it.

MethodDescription
closeclose the Message