Notification 通知

悬浮出现在页面角落,显示全局的通知提醒消息。

基础用法

Element Plus 注册了 $notify 方法并且它接受一个 Object 作为其参数。 在最简单的情况下,你可以通过设置 titlemessage 属性来设置通知的标题和正文内容。 默认情况下,通知在4500毫秒后自动关闭,但你可以通过设置 duration 属性来自定义通知的展示时间。 如果你将它设置为 0,那么通知将不会自动关闭。 需要注意的是 duration 接收一个 Number,单位为毫秒。

不同类型的通知

我们提供了四种不同类型的提醒框:success、warning、info 和error。

Element Plus 为 Notification 组件准备了四种通知类型:success, warning, info, error。 他们可以设置 type 字段来修改,除上述的四个值之外的值会被忽略。 同时,我们也为 Notification 的各种 type 注册了单独的方法,可以在不传入 type 字段的情况下像 open3open4 那样直接调用。

自定义消息弹出的位置

可以让 Notification 从屏幕四角中的任意一角弹出

使用 position 属性设置 Notification 的弹出位置, 支持四个选项:top-righttop-leftbottom-rightbottom-left, 默认为 top-right

有位置偏移的通知栏

能够设置偏移量来使 Notification 偏移默认位置。

Notification 提供设置偏移量的功能,通过设置 offset 字段,可以使弹出的消息距屏幕边缘偏移一段距离。 注意在同一时刻,每一个的 Notification 实例应当具有一个相同的偏移量。

使用 HTML 片段作为正文内容

message 支持传入 HTML 字符串来作为正文内容。

dangerouslyUseHTMLString 属性设置为 true,message 属性就会被当作 HTML 片段处理。

WARNING

message 属性虽然支持传入 HTML 片段,但是在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。 因此在 dangerouslyUseHTMLString 打开的情况下,请确保 message 的内容是可信的,永远不要将用户提交的内容赋值给 message 属性。

函数形式的 message 2.9.0

message 可以是 VNode。

2.9.0之后, message 支持返回值为 VNode的函数。

隐藏关闭按钮

通知的关闭按钮可以被设置为隐藏。

showClose 属性设置为 false 即可隐藏关闭按钮。

全局方法

Element Plus 为 app.config.globalProperties 添加了全局方法 $notify。 因此在 Vue instance 中可以采用本页面中的方式调用 Notification

单独引用

javascript
import { ElNotification } from 'element-plus'

你可以在对应的处理函数内调用 ElNotification(options) 来呼出通知栏。 我们也提前定义了多个 type 的单独调用方法,如 ElNotification.success(options)。 当你需要关闭页面上所有的通知栏的时候,可以调用 ElNotification.closeAll() 来关闭所有的实例。

应用程序上下文继承 > 2.0.4

现在 Notification 接受一条 context 作为消息构造器的第二个参数,允许你将当前应用的上下文注入到 Notification 中,这将允许你继承应用程序的所有属性。

你可以像这样使用它:

TIP

如果您全局注册了 ElNotification 组件,它将自动继承应用的上下文环境。

ts
import { getCurrentInstance } from 'vue'
import { ElNotification } from 'element-plus'

// 在你的 setup 方法中
const { appContext } = getCurrentInstance()!
ElNotification({}, appContext)

API

配置项

名称说明类型默认
title标题string''
message通知栏正文内容string / VNode / Function''
dangerouslyUseHTMLString是否将 message 属性作为 HTML 片段处理booleanfalse
type通知的类型enum''
icon自定义图标。 若设置了 type,则 icon 会被覆盖string / Component
customClass自定义类名string''
duration显示时间, 单位为毫秒。 值为 0 则不会自动关闭number4500
position自定义弹出位置enumtop-right
showClose是否显示关闭按钮booleantrue
onClose关闭时的回调函数Function
onClick点击 Notification 时的回调函数Function
offset相对屏幕顶部的偏移量 偏移的距离,在同一时刻,所有的 Notification 实例应当具有一个相同的偏移量number0
appendTo设置 notification 的根元素,默认为 document.bodystring / HTMLElement
zIndex初始 zIndexnumber0

方法

Notificationthis.$notify 都返回当前的 Notification 实例。 如果需要手动关闭实例,可以调用它的 close 方法。

名称详情类型
close关闭当前的 NotificationFunction

源代码

组件样式文档

贡献者