通知提醒框 Notification

基本用法

通知提醒框的基本用法。

自定义操作按钮

通过指定 btn 字段，可以添加操作按钮。

自定义关闭按钮

需要设置 closable: true，自定义元素使用 closeIconElement，仅图标使用 closeIcon (会有 hover 样式)。

全局提示的位置

通知提醒框有 4 种不同的弹出位置，分别为：左上角, 右上角 (默认), 左下角, 右下角。

自定义样式

可以设置 style 和 class 来定制样式。

消息类型

通知提醒框的消息类型。

更新延迟

通过指定参数 id，可以更新已经存在的通知提醒框。

更新通知内容

通过指定参数 id，可以更新已经存在的通知提醒框。

API

Notification 全局方法

Notification 提供的全局方法，可以通过以下三种方法使用：

1. 通过 this.$notification 调用
2. 在 Composition API 中，通过 getCurrentInstance().appContext.config.globalProperties.$notification 调用
3. 导入 Notification，通过 Notification 本身调用

当通过 import 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext

import { createApp } from 'vue';
import { Notification } from '@sdata/web-vue';

const app = createApp(App);
Notification._context = app._context;

消息去重

在 ConfigProvider 上设置 notification={ deduplicate: true } 并开启 global，可为全局调用启用去重，默认关闭。相同类型、相同标题和内容的重复调用会保留已有提示的位置，并重新开始关闭计时；关闭或清空后即可再次弹出。内容为渲染函数或 VNode 时按引用比较。Message 与 Notification 分别维护独立的池。

Notification.success({ content: '保存成功' });
// 本次允许重复弹出
Notification.success({ content: '保存成功', deduplicate: false });
// 本次单独启用去重
Notification.success({ content: '保存成功', deduplicate: true });

deduplicateByType 默认为 true，类型参与去重比较。设置为 false 后可合并不同类型的相同内容；Notification 仍比较标题。可在 ConfigProvider 对应配置中设置，也可单次传入覆盖；合并时保留已有提示的类型。

导入调用时仍需按上文设置 _context 或传入 AppContext，才能读取 ConfigProvider 默认值。显式 id 的调用不参与跨位置去重：在指定位置新增通知，或更新该位置的相同 ID。不同位置的相同 ID 保持独立，可通过返回的 close() 独立关闭；Notification.remove(id) 会移除所有位置的该 ID。未指定 ID 的调用仍可跨位置复用已有通知。

NotificationMethod

参数名	描述	类型	默认值
info	显示信息提醒框	( config: string | NotificationConfig, appContext?: AppContext ) => NotificationReturn	-
success	显示成功提醒框	( config: string | NotificationConfig, appContext?: AppContext ) => NotificationReturn	-
warning	显示警告提醒框	( config: string | NotificationConfig, appContext?: AppContext ) => NotificationReturn	-
error	显示错误提醒框	( config: string | NotificationConfig, appContext?: AppContext ) => NotificationReturn	-
remove	清除对应 id 的提醒框	(id: string) => void	-
clear	清除全部提醒框	(position?: NotificationPosition) => void	-

NotificationConfig

参数名	描述	类型	默认值	版本
deduplicateByType	类型是否参与去重，单次调用优先于全局配置	boolean	true
deduplicate	是否去重，单次调用优先于全局配置	boolean	-
content	内容	RenderContent	-
title	标题	RenderContent	-
icon	图标	RenderFunction	-
id	唯一id	string	-
style	样式	CSSProperties	-
class	样式类名	ClassName	-
position	位置	'topLeft'|'topRight'|'bottomLeft'|'bottomRight'	-
showIcon	是否显示图标	boolean	true
closable	是否可关闭	boolean	false
duration	显示的持续时间，单位为 ms	number	3000
footer	底部内容	RenderFunction	-	2.25.0
closeIcon	关闭按钮图标	RenderFunction	-
closeIconElement	关闭按钮元素	RenderFunction	-
onClose	关闭时的回调函数	(id: number | string) => void	-

NotificationReturn

参数名	描述	类型	默认值
close	关闭当前通知提醒框	() => void	-