Notification 通知
悬浮出现在页面角落，显示全局的通知提醒消息。
ts
import { Notification } from '@szhn/dh-design-pc'基础用法
Notification 组件提供通知功能，调用时接受一个对象作为参数。可通过 title 和 message 设置标题和正文，duration 控制自动关闭时长，设为 0 表示不会自动关闭。
不同类型的通知
dh-design-pc 为 Notification 组件准备了 success / warning / info / error 四种类型，可以通过 type 字段指定，也可以直接使用 Notification.success 等快捷方法。
自定义弹出位置
使用 position 属性可让 Notification 从屏幕四角中的任意一角弹出，支持 top-right / top-left / bottom-right / bottom-left，默认为 top-right。
有位置偏移的通知栏
通过 offset 字段可以使弹出的消息距屏幕边缘偏移一段距离。
使用 HTML 片段
将 dangerouslyUseHTMLString 设置为 true，message 就会被当作 HTML 片段处理。
使用 VNode
message 既支持普通 VNode，也支持返回 VNode 的函数形式，适合承载带状态的内容。
隐藏关闭按钮
将 showClose 设置为 false 可以隐藏通知右上角的关闭按钮。
全局方法
如果以插件方式完整注册，组件实例上会自动注入 $notify 方法。
按需引入
ts
import { Notification } from '@szhn/dh-design-pc'
Notification({
title: '提示',
message: '这是一条通知消息',
})
Notification.closeAll()应用上下文继承
通知方法支持接收当前应用的 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 表示不自动关闭 | number | 4500 |
| position | 弹出位置 | top-right / top-left / bottom-right / bottom-left | top-right |
| showClose | 是否显示关闭按钮 | boolean | true |
| offset | 相对屏幕的偏移量 | number | 0 |
| appendTo | 指定挂载根节点 | string / HTMLElement | — |
| dangerouslyUseHTMLString | 是否作为 HTML 片段 | boolean | false |
| onClose | 关闭时回调 | Function | — |
| onClick | 点击时回调 | Function | — |
| closeIcon | 自定义关闭图标 | string / Component | Close |
方法
| 名称 | 说明 |
|---|---|
| Notification.success / warning / info / error | 快捷打开对应类型的通知 |
| Notification.closeAll() | 关闭所有通知 |
| instance.close() | 关闭当前通知 |
更多配置参见 Element Plus Notification。