Notification
Displays a global notification message at a corner of the page.
Basic usage
With types
We provide four types: success, warning, info and error.
Custom position
Notification can emerge from any corner you like.
With offset
Customize Notification's offset from the edge of the screen.
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.
Hide close button
It is possible to hide the close button
Global method
Element Plus has added a global method $notify for app.config.globalProperties. So in a vue instance you can call Notification like what we did in this page.
Local import
import { ElNotification } from 'element-plus'
In this case you should call ElNotification(options). We have also registered methods for different types, e.g. ElNotification.success(options). You can call ElNotification.closeAll() to manually close all the instances.
App context inheritance > 2.0.4
Now notification accepts a context as second parameter of the message constructor which allows you to inject current app's context to notification which allows you to inherit all the properties of the app.
You can use it like this:
TIP
If you globally registered ElNotification component, it will automatically inherit your app context.
import { getCurrentInstance } from 'vue'
import { ElNotification } from 'element-plus'
// in your setup method
const { appContext } = getCurrentInstance()!
ElNotification({}, appContext)
API
Options
| Name | Description | Type | Default |
|---|---|---|---|
| title | title | string | '' |
| message | description text | string / VNode | '' |
| dangerouslyUseHTMLString | whether message is treated as HTML string | boolean | false |
| type | notification type | enum | '' |
| icon | custom icon component. It will be overridden by type | string / Component | — |
| customClass | custom class name for Notification | string | '' |
| duration | duration before close. It will not automatically close if set 0 | number | 4500 |
| position | custom position | enum | top-right |
| showClose | whether to show a close button | boolean | true |
| onClose | callback function when closed | Function | — |
| onClick | callback function when notification clicked | Function | — |
| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | 0 |
| appendTo | set the root element for the notification, default to document.body | string / HTMLElement | — |
| zIndex | initial zIndex | number | 0 |
Method
Notification and this.$notify returns the current Notification instance. To manually close the instance, you can call close on it.
| Name | Description | Type |
|---|---|---|
| close | close the Notification | Function |