Notification 通知 ​

在页面角落显示全局的通知提醒消息。

基础用法 ​

不同类型 ​

我们提供了四种类型：success、warning、info 和 error。

自定义位置 ​

通知可以从您喜欢的任何角落出现。

带有偏移量 ​

自定义通知从屏幕边缘的偏移量。

使用 HTML 字符串 ​

message 属性支持 HTML 片段。

使用函数的 Message 2.9.0 ​

message 可以是 VNode。

在 2.9.0 版本后， message 支持一个函数，其返回值是一个 VNode。

隐藏关闭按钮 ​

可以隐藏关闭按钮

全局方法 ​

Element Plus 为 app.config.globalProperties 添加了一个全局方法 $notify。 因此，在一个 vue 实例中，你可以像我们在这个页面上做的那样调用 Notification。

局部导入 ​

import { ElNotification } from 'element-plus'
import { CloseBold } from '@element-plus/icons-vue'

ElNotification({
  title: 'Title',
  message: 'This is a message',
  closeIcon: CloseBold,
})

在这种情况下，您应该调用 ElNotification(options)。 我们还为不同的类型注册了方法，例如 ElNotification.success(options)。 您可以调用 ElNotification.closeAll() 来手动关闭所有实例。 在 2.10.5 版本中，你可以通过调用 ElNotification.updateOffsets(position) 来手动更新特定方向所有实例的偏移量。

应用上下文继承 > 2.0.4 ​

现在通知接受 context 作为消息构造函数的第二个参数，它允许您将当前应用程序的上下文注入到通知中，从而允许您继承应用程序的所有属性。

您可以像这样使用它

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

// in your setup method
const { appContext } = getCurrentInstance()!
ElNotification({}, appContext)

API ​

配置项 ​

方法 ​

Notification 和 this.$notify 返回当前的通知实例。 要手动关闭该实例，您可以在其上调用 close。

来源 ​

组件 • 样式 • 文档

贡献者 ​