You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
9
+
10
+
## Basic usage
11
+
12
+
Displays at the top, and disappears after 3 seconds.
13
+
14
+
:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element Plus has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
15
+
16
+
message/basic
17
+
18
+
:::
19
+
20
+
## Types
21
+
22
+
Used to show the feedback of Success, Warning, Message and Error activities.
23
+
24
+
:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
25
+
26
+
message/different-types
27
+
28
+
:::
29
+
30
+
## Closable
31
+
32
+
A close button can be added.
33
+
34
+
:::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
35
+
36
+
message/closable
37
+
38
+
:::
39
+
40
+
## Centered text
41
+
42
+
Use the `center` attribute to center the text.
43
+
44
+
:::demo
45
+
46
+
message/centered-content
47
+
48
+
:::
49
+
50
+
## Use HTML string
51
+
52
+
`message` supports HTML string.
53
+
54
+
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
55
+
56
+
message/raw-html
57
+
58
+
:::
59
+
60
+
:::warning
61
+
62
+
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](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
63
+
64
+
:::
65
+
66
+
## Grouping
67
+
68
+
merge messages with the same content.
69
+
70
+
:::demo Set `grouping` to true and the same content of `message` will be merged.
71
+
72
+
message/grouping
73
+
74
+
:::
75
+
76
+
## Global method
77
+
78
+
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.
79
+
80
+
## Local import
81
+
82
+
```ts
83
+
// import { ElMessage } from 'element-plus'
84
+
```
85
+
86
+
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.
Now message accepts a `context` as second 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.
91
+
92
+
You can use it like this:
93
+
94
+
:::tip
95
+
96
+
If you globally registered ElMessage component, it will automatically inherit your app context.
0 commit comments