Notification 通知 ​

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

ts
import { Notification } from '@szhn/dh-design-pc'

基础用法 ​

Notification 组件提供通知功能，调用时接受一个对象作为参数。可通过 title 和 message 设置标题和正文，duration 控制自动关闭时长，设为 0 表示不会自动关闭。

<template>
  <div class="demo-row">
    <el-button @click="openDefault">默认通知</el-button>
    <el-button @click="openNoAutoClose">不自动关闭</el-button>
  </div>
</template>

<script lang="ts" setup>
import { Notification, Button as ElButton } from '@szhn/dh-design-pc'


function openDefault() {
  Notification({ title: '提示', message: '这是一条基础通知，4.5 秒后自动关闭' })
}

function openNoAutoClose() {
  Notification({ title: '提示', message: '此通知不会自动关闭', duration: 0 })
}
</script>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

不同类型的通知 ​

dh-design-pc 为 Notification 组件准备了 success / warning / info / error 四种类型，可以通过 type 字段指定，也可以直接使用 Notification.success 等快捷方法。

<template>
  <div class="demo-row">
    <el-button @click="Notification.success({ title: '成功', message: '操作已完成' })">Success</el-button>
    <el-button @click="Notification.warning({ title: '警告', message: '请注意相关风险' })">Warning</el-button>
    <el-button @click="Notification.info({ title: '消息', message: '这是一条信息' })">Info</el-button>
    <el-button @click="Notification.error({ title: '错误', message: '操作失败' })">Error</el-button>
  </div>
</template>

<script lang="ts" setup>
import { Notification, Button as ElButton } from '@szhn/dh-design-pc'

</script>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

自定义弹出位置 ​

使用 position 属性可让 Notification 从屏幕四角中的任意一角弹出，支持 top-right / top-left / bottom-right / bottom-left，默认为 top-right。

<template>
  <div class="demo-row">
    <el-button @click="open('top-right')">右上</el-button>
    <el-button @click="open('top-left')">左上</el-button>
    <el-button @click="open('bottom-right')">右下</el-button>
    <el-button @click="open('bottom-left')">左下</el-button>
  </div>
</template>

<script lang="ts" setup>
import { Notification, Button as ElButton } from '@szhn/dh-design-pc'


type Pos = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

function open(position: Pos) {
  Notification({ title: position, message: `弹出位置：${position}`, position })
}
</script>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

有位置偏移的通知栏 ​

通过 offset 字段可以使弹出的消息距屏幕边缘偏移一段距离。

<template>
  <el-button @click="open">带偏移的通知</el-button>
</template>

<script lang="ts" setup>
import { Notification, Button as ElButton } from '@szhn/dh-design-pc'


function open() {
  Notification({ title: '提示', message: '距离顶部有 80px 的偏移', offset: 80 })
}
</script>

使用 HTML 片段 ​

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

<template>
  <el-button @click="open">HTML 内容</el-button>
</template>

<script lang="ts" setup>
import { Notification, Button as ElButton } from '@szhn/dh-design-pc'


function open() {
  Notification({
    title: '富文本通知',
    dangerouslyUseHTMLString: true,
    message: '<strong>强调</strong> <i style="color: var(--el-color-primary);">任意 HTML</i> 片段',
  })
}
</script>

使用 VNode (2.9.0) ​

message 既支持普通 VNode，也支持返回 VNode 的函数形式，适合承载带状态的内容。

<template>
  <div class="demo-row">
    <el-button plain @click="openCommon">普通 VNode</el-button>
    <el-button plain @click="openDynamic">动态内容</el-button>
  </div>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import { Button as ElButton, Notification, Switch as ElSwitch } from '@szhn/dh-design-pc'


function openCommon() {
  Notification({
    title: 'VNode 示例',
    message: h('p', null, [
      h('span', null, '通知正文也可以是 '),
      h('strong', { style: 'color: var(--el-color-success);' }, 'VNode'),
    ]),
  })
}

function openDynamic() {
  const checked = ref<boolean | string | number>(false)

  Notification({
    title: '动态内容',
    message: () =>
      h(ElSwitch, {
        modelValue: checked.value,
        'onUpdate:modelValue': (value: boolean | string | number) => {
          checked.value = value
        },
      }),
  })
}
</script>

<style scoped>
.demo-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

隐藏关闭按钮 ​

将 showClose 设置为 false 可以隐藏通知右上角的关闭按钮。

<template>
  <el-button @click="open">隐藏关闭按钮</el-button>
</template>

<script lang="ts" setup>
import { Notification, Button as ElButton } from '@szhn/dh-design-pc'


function open() {
  Notification({
    title: '提示',
    message: '该通知没有关闭按钮，到时间会自动关闭',
    showClose: false,
  })
}
</script>

全局方法 ​

如果以插件方式完整注册，组件实例上会自动注入 $notify 方法。

按需引入 ​

ts
import { Notification } from '@szhn/dh-design-pc'

Notification({
  title: '提示',
  message: '这是一条通知消息',
})
Notification.closeAll()

应用上下文继承 (2.0.4) ​

通知方法支持接收当前应用的 appContext 作为第二个参数，以继承全局上下文能力。

ts
import { getCurrentInstance } from 'vue'
import { Notification } from '@szhn/dh-design-pc'

const { appContext } = getCurrentInstance()!
Notification({}, appContext)

API ​

配置项（部分） ​

名称说明类型默认
title标题string''
message正文string / VNode / Function''
type通知类型success / warning / info / error / primary''
icon自定义图标string / Component—
duration显示时间（毫秒），0 表示不自动关闭number4500
position弹出位置top-right / top-left / bottom-right / bottom-lefttop-right
showClose是否显示关闭按钮booleantrue
offset相对屏幕的偏移量number0
appendTo指定挂载根节点string / HTMLElement—
dangerouslyUseHTMLString是否作为 HTML 片段booleanfalse
onClose关闭时回调Function—
onClick点击时回调Function—
closeIcon 2.9.8自定义关闭图标string / ComponentClose

方法 ​

名称说明
Notification.success / warning / info / error快捷打开对应类型的通知
Notification.closeAll()关闭所有通知
instance.close()关闭当前通知

更多配置参见 Element Plus Notification。