通知 Notification

感觉就是样式不同的 Message

基础使用

如果你完整注册了组件库，你可以以以下方式使用它：

• window.$notification；
• Vue 组件内： getCurrentInstance().appContext.config.globalProperties.PixeliumVue.notification；
• 从 @pixelium/web-vue 中导入。

按需引入时，也可以从 @pixelium/web-vue/es 中导入 Notification 使用。

隐藏源代码

消息类型

Notification 有 'normal'（默认）、'info'、'success'、'warning'、'error'、'loading'、'sakura'、'notice'，多种类型，其中 'normal' 和 'sakura' 默认不展示图标。

隐藏源代码

通知位置

Notification 可以出现在左上、右上（默认）、左下、右下，4 个位置。

隐藏源代码

可关闭

closable 设置 Notification 可关闭。

隐藏源代码

持续时间

duration 设置持续时间。

隐藏源代码

通知容器

NotificationBox 组件是消息的容器，消息出现的位置由容器的 placement 决定。在以函数式创建的消息中，出现位置相同的 Notification 都是同一个 NotificationBox 的子组件。我们也提供了 NotificationBox 的导出。

Notification count: 0

隐藏源代码

API

NotificationFunction

export type NotificationFunction = {
	(options: ValidContent | NotificationOptions): NotificationReturn
} & {
	[key in NotificationOptions['type'] & string]: (
		options: Omit<NotificationOptions, 'type'> | string
	) => NotificationReturn
}
declare const notification: NotificationFunction

ValidContent, ValidVNodeContent

export type ValidContent = string | ((...args: any[]) => VNode | string | JSX.Element | null | void)
export type ValidVNodeContent = (...args: any[]) => VNode | JSX.Element

NotificationOptions

属性	类型	可选	默认值	描述	版本
title	ValidContent	是		Notification 标题。	0.2.0
content	ValidContent	是		Notification 内容。	0.2.0
icon	ValidVNodeContent	是		Notification 图标。	0.2.0
duration	number	是	5000	持续时间（ms）。	0.2.0
type	'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice'	是	'normal'	Notification 类型。	0.2.0
color	string	是		自定义主色，详见 支持的颜色解析。	0.2.0
closable	boolean	是	false	是否可以关闭 Notification。	0.2.0
placement	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	是	'top'	Notification 出现位置。	0.0.2
root	string | HTMLElement	是	'body'	NotificationBox 挂载元素。	0.2.0

NotificationReturn

属性	类型	可选	默认值	描述	版本
close	() => void	否		关闭当前 Notification。	0.2.0
clear	() => void	否		清空当前 NotificationBox。	0.2.0
unmount	() => void	否		卸载当前 NotificationBox。	0.2.0

NotificationBoxProps

属性	类型	可选	默认值	描述	版本
notifications	NotificationProps[]	是		当前 NotificationBox 的所有 Notification 条目，需要使用 v-model。	0.2.0
placement	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	是	'top'	Notification 出现位置。	0.0.2
zIndex	number	是		NotificationBox 的 z-index 样式。	0.2.0
root	string | HTMLElement	是	'body'	NotificationBox 挂载元素。	0.2.0

NotificationBoxEvents

事件	参数	描述	版本
update:notifications	value: NotificationProps[]	v-model 更新 notifications 属性。	0.2.0
close	id: string | number | symbol	关闭 Notification 的回调。	0.2.0

NotificationBoxExpose

属性	类型	可选	默认值	描述	版本
close	(id: number | string | symbol) => void	否		关闭当前 Notification。	0.2.0

NotificationProps

属性	类型	可选	默认值	描述	版本
title	ValidContent	是		Notification 标题。	0.2.0
content	ValidContent	是		Notification 内容。	0.2.0
icon	ValidVNodeContent	是		Notification 图标。	0.2.0
duration	number	是	5000	持续时间（ms）。	0.2.0
id	number | string | symbol	是		唯一标识，默认使用随机的 nanoid。	0.2.0
type	'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice'	是	'normal'	Notification 类型。	0.2.0
color	string	是		自定义主色，详见 支持的颜色解析。	0.2.0
closable	boolean	是	false	是否可以关闭 Notification。	0.2.0
placement	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	是	'top-right'	Notification 出现位置的标记，影响动画效果。	0.2.0