🌏 Translated with the assistance of DeepSeek and ChatGPT

Notification

Essentially a Message with different styling.

Basic Usage

If you have fully registered the component library, you can use it in the following ways:

• window.$notification;
• Inside a Vue component: getCurrentInstance().appContext.config.globalProperties.PixeliumVue.notification;
• Import from @pixelium/web-vue.

For on-demand import, you can also import Notification from @pixelium/web-vue/es.

Hide source code

Message Types

Notification has multiple types: 'normal' (default), 'info', 'success', 'warning', 'error', 'loading', 'sakura', 'notice'. Among them, 'normal' and 'sakura' do not display an icon by default.

Hide source code

Position

Notification can appear in four positions: top-left, top-right (default), bottom-left, bottom-right.

Hide source code

Closable

Set closable to make the Notification closable.

Hide source code

Duration

Set duration to control how long the Notification stays.

Hide source code

Notification Container

The NotificationBox component is the container for messages. The position where messages appear is determined by the container's placement. In notifications created functionally, all notifications with the same placement are child components of the same NotificationBox. We also provide an export of NotificationBox.

Notification count: 0

Hide source code

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

Attribute	Type	Optional	Default	Description	Version
title	ValidContent	True		Notification title.	0.2.0
content	ValidContent	True		Notification content.	0.2.0
icon	ValidVNodeContent	True		Notification icon.	0.2.0
duration	number	True	5000	Duration (ms).	0.2.0
type	'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice'	True	'normal'	Notification type.	0.2.0
color	string	True		Custom primary color, see Supported color parsing for details.	0.2.0
closable	boolean	True	false	Whether the Notification can be closed.	0.2.0
placement	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top'	Notification placement.	0.0.2
root	string | HTMLElement	True	'body'	NotificationBox mount element.	0.2.0

NotificationReturn

Attribute	Type	Optional	Default	Description	Version
close	() => void	False		Close the current Notification.	0.2.0
clear	() => void	False		Clear all Notifications in the current NotificationBox.	0.2.0
unmount	() => void	False		Unmount the current NotificationBox.	0.2.0

NotificationBoxProps

Attribute	Type	Optional	Default	Description	Version
notifications	NotificationProps[]	True		All Notification entries in the current NotificationBox, requires v-model.	0.2.0
placement	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top'	Notification placement.	0.0.2
zIndex	number	True		z-index style of NotificationBox.	0.2.0
root	string | HTMLElement	True	'body'	NotificationBox mount element.	0.2.0

NotificationBoxEvents

Event	Parameter	Description	Version
update:notifications	value: NotificationProps[]	v-model updates the notifications property.	0.2.0
close	id: string | number | symbol	Callback for closing a Notification.	0.2.0

NotificationBoxExpose

Attribute	Type	Optional	Default	Description	Version
close	(id: number | string | symbol) => void	False		Close the current Notification.	0.2.0

NotificationProps

Attribute	Type	Optional	Default	Description	Version
title	ValidContent	True		Notification title.	0.2.0
content	ValidContent	True		Notification content.	0.2.0
icon	ValidVNodeContent	True		Notification icon.	0.2.0
duration	number	True	5000	Duration (ms).	0.2.0
id	number | string | symbol	True		Unique identifier, defaults to a random nanoid.	0.2.0
type	'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice'	True	'normal'	Notification type.	0.2.0
color	string	True		Custom primary color, see Supported color parsing.	0.2.0
closable	boolean	True	false	Whether the Notification can be closed.	0.2.0
placement	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top-right'	The marker for where the Notification appears, affects the animation effect.	0.2.0