Notification 通知

Notification 悬浮出现在页面角落，用于展示全局通知提醒。VISTA B 直接使用 Element Plus 的 ElNotification 服务，适合系统任务结果、后台识别进度、风险提醒等需要脱离当前内容流展示的信息。

基础用法

ElNotification 接受一个对象作为参数。通过 title 设置标题，通过 message 设置正文；默认 4500 毫秒后自动关闭，duration 设置为 0 时不会自动关闭。

<script setup>
import { h } from 'vue'
import { ElNotification } from 'element-plus'

const open1 = () => {
  ElNotification({
    title: 'Title',
    message: h('i', { style: 'color: teal' }, 'This is a reminder')
  })
}

const open2 = () => {
  ElNotification({
    title: 'Prompt',
    message: 'This is a message that does not automatically close',
    duration: 0
  })
}
</script>

<template>
  <el-button plain @click="open1">Closes automatically</el-button>
  <el-button plain @click="open2">Won't close automatically</el-button>
</template>

不同类型

Notification 支持 primary、success、warning、info 和 error 五种类型。也可以使用 ElNotification.success(options) 这类类型方法。

<script setup>
import { ElNotification } from 'element-plus'

const open = () => {
  ElNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success'
  })
}

const openByMethod = () => {
  ElNotification.warning({
    title: 'Warning',
    message: 'This is a warning message'
  })
}
</script>

自定义消息弹出的位置

通过 position 设置弹出位置，支持 top-right、top-left、bottom-right 和 bottom-left，默认值为 top-right。

<script setup>
import { ElNotification } from 'element-plus'

const open = () => {
  ElNotification({
    title: 'Custom Position',
    message: "I'm at the bottom right corner",
    position: 'bottom-right'
  })
}
</script>

有位置偏移的通知栏

通过 offset 设置通知距屏幕边缘的偏移量。同一时刻同一方向的 Notification 实例建议使用相同偏移量。

<script setup>
import { ElNotification } from 'element-plus'

const open = () => {
  ElNotification.success({
    title: 'Success',
    message: 'This is a success message',
    offset: 100
  })
}
</script>

使用 HTML 片段作为正文内容

将 dangerouslyUseHTMLString 设置为 true 后，message 会被当作 HTML 片段处理。

<script setup>
import { ElNotification } from 'element-plus'

const open = () => {
  ElNotification({
    title: 'HTML String',
    dangerouslyUseHTMLString: true,
    message: '<strong>This is <i>HTML</i> string</strong>'
  })
}
</script>

WARNING

开启 dangerouslyUseHTMLString 后，只能传入可信内容，不要将用户提交的内容直接赋值给 message。

函数形式的 message

message 可以是 VNode。若 VNode 中包含动态属性，建议使用函数形式返回 VNode。

<script setup>
import { h, ref } from 'vue'
import { ElNotification, ElSwitch } from 'element-plus'

const open = () => {
  ElNotification({
    title: 'Use VNode',
    message: h('p', null, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode')
    ])
  })
}

const openDynamic = () => {
  const checked = ref(false)

  ElNotification({
    title: 'Use VNode',
    message: () =>
      h(ElSwitch, {
        modelValue: checked.value,
        'onUpdate:modelValue': (value) => {
          checked.value = value
        }
      })
  })
}
</script>

隐藏关闭按钮

将 showClose 设置为 false 可以隐藏关闭按钮。

<script setup>
import { ElNotification } from 'element-plus'

const open = () => {
  ElNotification.success({
    title: 'Info',
    message: 'This is a message without close button',
    showClose: false
  })
}
</script>

单独引用

在处理函数内调用 ElNotification(options) 可以呼出通知栏。ElNotification 返回当前通知实例，实例提供 close 方法；需要关闭所有通知时，可以调用 ElNotification.closeAll()。

等待触发

<script setup>
import { ElNotification } from 'element-plus'
import { CloseBold } from '@element-plus/icons-vue'

const open = () => {
  const notification = ElNotification({
    title: 'Title',
    message: 'This is a message',
    closeIcon: CloseBold
  })

  notification.close()
}

const closeAll = () => {
  ElNotification.closeAll()
}
</script>

API

配置项

名称	说明	类型	默认值
title	标题	string	''
message	通知栏正文内容	string / VNode / Function	''
dangerouslyUseHTMLString	是否将 message 作为 HTML 片段处理	boolean	false
type	通知类型	primary / success / info / warning / error / ''	''
icon	自定义图标。设置 type 时会被覆盖	string / Component	-
customClass	自定义类名	string	''
duration	显示时间，单位毫秒；设为 0 时不会自动关闭	number	4500
position	弹出位置	top-right / top-left / bottom-right / bottom-left	top-right
showClose	是否显示关闭按钮	boolean	true
onClose	关闭时的回调函数	(vm: VNode) => void	-
onClick	点击 Notification 时的回调函数	() => void	-
offset	相对屏幕边缘的偏移量	number	0
appendTo	设置通知栏根元素	CSSSelector / HTMLElement	document.body
zIndex	初始 z-index	number	0
closeIcon	自定义关闭图标	string / Component	Close

方法

名称	说明	类型
close	关闭当前 Notification 实例	() => void
ElNotification.closeAll	关闭所有 Notification 实例	() => void
ElNotification.updateOffsets	手动更新指定方向的通知偏移	(position?: NotificationPosition) => void

使用提醒

• Notification 用于全局通知，不用于表单字段旁的局部校验提示。
• duration: 0 的通知需要明确关闭路径，避免用户界面长期堆积。
• dangerouslyUseHTMLString 只用于可信静态内容；动态内容优先使用 VNode。