Notification 消息通知

标题名称

这是一条消息通知

基础的消息通知

基础消息通知，可手动关闭也可自动退出。

标题名称

这是一条消息通知

标题名称

这是一条消息通知（展示 5 秒后消失）

带图标的消息通知

带图标的消息通知提供两种情况：普通消息通知和重要消息通知（如：系统错误等）。

普通通知

这是一条普通的消息通知

危险通知

这是一条危险的消息通知

告警通知

这是一条告警的消息通知

成功通知

这是一条成功的消息通知

带操作的消息通知

带有操作的消息通知为用户提供下一步行动点，在消息提示框中进行简要快捷的交互。

超出的文本省略号显示

文案不限长度，但在实际使用时建议文案显示内容不易过多，建议最大展示行数数量以三行为宜，最后一行折行末尾处超出文本建议会变为省略号显示。

带关闭按钮

这是一条消息通知

消息通知标题

使用 function 自定义底部内容

消息通知标题消息通知副标题

1. 使用插槽自定义标题 2. 使用插槽自定义底部内容

位置控制

全局提示显示位置可控制，placement 用于控制大概位置，offset 用于设置相对于 placement 所在位置的偏移

关闭提示

如果不希望通过计时关闭，或者用户点击按钮关闭，也可以使用关闭函数。

关闭多个消息通知

可以通过closeAll同时关闭多个消息通知。

插件调用与函数式调用

支持插件式调用 this.$notify 和函数式调用 NotifyPlugin 两种方式，两种方式参数完全一样。

示例：NotifyPlugin.warning({title: '请输入标题', content: '请输入内容'}) 或 this.$notify.warning({title: '请输入标题', content: '请输入内容'})

插件调用

函数调用

Notification Props

名称	类型	默认值	说明	必传
closeBtn	String / Boolean / Slot / Function	undefined	关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string \| boolean \| TNode`。通用类型定义	N
content	String / Slot / Function	-	自定义内容。TS 类型：`string \| TNode`。通用类型定义	N
default	String / Slot / Function	-	自定义内容，同 content。TS 类型：`string \| TNode`。通用类型定义	N
duration	Number	3000	消息显示时长，单位：毫秒。值为 0 表示永久显示	N
footer	String / Slot / Function	-	用于自定义底部内容。TS 类型：`string \| TNode`。通用类型定义	N
icon	Boolean / Slot / Function	true	用于自定义消息通知前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode`。通用类型定义	N
theme	String	info	消息类型。可选项：info/success/warning/error。TS 类型：`NotificationThemeList` `type NotificationThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。详细类型定义	N
title	String / Slot / Function	-	标题。TS 类型：`string \| TNode`。通用类型定义	N
onCloseBtnClick	Function		TS 类型：`(context: { e: MouseEvent }) => void` 点击关闭按钮时触发	N
onDurationEnd	Function		TS 类型：`() => void` 计时结束时触发	N

Notification Events

名称	参数	描述
close-btn-click	`(context: { e: MouseEvent })`	点击关闭按钮时触发
duration-end	-	计时结束时触发

NotificationOptions

名称	类型	默认值	说明	必传
attach	String / Function	'body'	指定消息通知挂载的父节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。通用类型定义	N
offset	Array	-	相对于 placement 的偏移量，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>`	N
placement	String	top-right	消息弹出位置。可选项：top-left/top-right/bottom-left/bottom-right。TS 类型：`NotificationPlacementList` `type NotificationPlacementList = 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`。详细类型定义	N
zIndex	Number	6000	消息通知层级	N
`NotificationProps`	-	-	继承 `NotificationProps` 中的全部 API	N

NotificationPlugin

同时也支持 this.$notification。

参数名称	参数类型	参数默认值	参数说明
theme	String	info	必需。消息类型。可选项：info/success/warning/error。TS 类型：`NotificationThemeList`
options	Object	-	必需。消息通知内容。TS 类型：`NotificationOptions`
context	-	-	要继承的应用的上下文。TS 类型：`AppContext`。通用类型定义

NotificationPlugin.info

同时也支持 this.$notification.info。

参数名称	参数类型	参数默认值	参数说明
options	Object	-	必需。消息通知内容。TS 类型：`NotificationInfoOptions` `type NotificationInfoOptions = Omit<NotificationOptions, 'theme'>`。详细类型定义
context	-	-	要继承的应用的上下文。TS 类型：`AppContext`。通用类型定义

插件返回值：Promise<NotificationInstance>

NotificationPlugin.warning

同时也支持 this.$notification.warning。

参数名称	参数类型	参数默认值	参数说明
options	Object	-	必需。消息通知内容。TS 类型：`NotificationInfoOptions`
context	-	-	要继承的应用的上下文。TS 类型：`AppContext`。通用类型定义

插件返回值：Promise<NotificationInstance>

NotificationPlugin.error

同时也支持 this.$notification.error。

参数名称	参数类型	参数默认值	参数说明
options	Object	-	必需。消息通知内容。TS 类型：`NotificationInfoOptions`
context	-	-	要继承的应用的上下文。TS 类型：`AppContext`。通用类型定义

插件返回值：Promise<NotificationInstance>

NotificationPlugin.success

同时也支持 this.$notification.success。

参数名称	参数类型	参数默认值	参数说明
options	Object	-	必需。消息通知内容。TS 类型：`NotificationInfoOptions`
context	-	-	要继承的应用的上下文。TS 类型：`AppContext`。通用类型定义

插件返回值：Promise<NotificationInstance>

NotificationPlugin.close

同时也支持 this.$notification.close。

参数名称	参数类型	参数默认值	参数说明
options	Object	-	必需。该插件参数为 $Notification.info() 等插件执行后的返回值。示例：`const msg = $Notification.info({}); $Notification.close(msg)`。TS 类型：`Promise<NotificationInstance>`
context	-	-	要继承的应用的上下文。TS 类型：`AppContext`。通用类型定义

NotificationPlugin.closeAll

同时也支持 this.$notification.closeAll。

参数名称	参数类型	参数默认值	参数说明
--	-	-	-

NotificationPlugin.config

同时也支持 this.$notification.config。

参数名称	参数类型	参数默认值	参数说明
notify	Object	-	必需。消息通知插件全局配置。TS 类型：`NotificationOptions`

相似组件	何时使用
消息通知	需要提醒用户来自系统的消息，且不打断用户；带有解释描述的提醒内容。
全局提示	通常跟随在用户操作之后，对用户的操作作出轻量、即时的反馈；自动消失，不带其他交互操作；反馈内容简短。
警告	警告常用于承载站内相关产品某项功能的解释说明、使用注意事项等，置于内容展示区域顶部，非悬浮层。

Notification 消息通知

基础的消息通知

带图标的消息通知

带操作的消息通知

位置控制

关闭提示

关闭多个消息通知

插件调用与函数式调用

Notification Props

Notification Events

NotificationOptions

NotificationPlugin

NotificationPlugin.info

NotificationPlugin.warning

NotificationPlugin.error

NotificationPlugin.success

NotificationPlugin.close

NotificationPlugin.closeAll

NotificationPlugin.config

何时使用

与页面布局相关

消息通知建议悬浮出现在页面右上角、左下角或右下角，避免对页面主要内容的干扰。

推荐/慎用示例

当存在多个反馈同时触发时，避免出现多个消息提示互相重叠。

相似组件