🌏 Translated with the assistance of DeepSeek and ChatGPT

Message

Global message prompt, used to feedback the result of user operations.

Basic Usage

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

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

When importing on-demand, you can also import Message from @pixelium/web-vue/es for use.

Hide source code

Message Types

Messages come in various types: 'normal' (default), 'info', 'success', 'warning', 'error', 'loading', 'sakura' and 'notice'. Among them, 'normal' and 'sakura' do not display icons by default.

Hide source code

Message Placements

Messages can appear in 6 placements: top-left, top (default), top-right, bottom-left, bottom-right, and bottom.

Hide source code

Closable Messages

Set closable to make the message closable.

Hide source code

Duration

Set the duration of the message with duration.

Hide source code

Message Icons

Set the message icon with icon.

Hide source code

Message Content

Message content supports JSX or render functions.

Hide source code

Custom Colors

Customize the primary color. The internal system generates a complete color palette based on this, which has a higher priority than the preset color palette provided by the type property. See Supported Color Parsing.

Hide source code

Message Container

The MessageBox component is the container for messages. The position of the message is determined by the container's placement. In functionally created messages, messages with the same position are sub-components of the same MessageBox. We also provide an export for MessageBox.

Message count: 0

Hide source code

API

MessageFunction

export type MessageFunction = {
	(options: ValidContent | MessageOptions): MessageReturn
} & {
	[key in MessageOptions['type'] & string]: (
		options: Omit<MessageOptions, 'type'> | string
	) => MessageReturn
}
declare const message: MessageFunction

ValidContent, ValidVNodeContent

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

MessageOptions

Attribute	Type	Optional	Default	Description	Version
content	ValidContent	True		Message content.	0.0.0-beta
icon	ValidVNodeContent	True		Message icon.	0.0.0-beta
duration	number	True	3000	Duration (ms).	0.0.0-beta
type	'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice'	True	'normal'	Message type.	0.0.0-beta
color	string	True		Custom primary color. See Supported Color Parsing.	0.0.0-beta
closable	boolean	True	false	Whether the message can be closed.	0.0.0-beta
placement	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top'	The position where the message appears.	0.0.2
position	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top'	Deprecated The position where the message appears.	0.0.0-beta
root	string | HTMLElement	True	'body'	The element where the message is mounted.	0.0.0-beta

MessageReturn

Attribute	Type	Optional	Default	Description	Version
close	() => void	False		Close the current message.	0.0.0-beta
clear	() => void	False		Clear all messages in the current MessageBox.	0.0.0-beta
unmount	() => void	False		Unmount current MessageBox.	0.2.0

MessageBoxProps

Attribute	Type	Optional	Default	Description	Version
messages	MessageProps[]	True		All messages of the current MessageBox need to use v-model.	0.0.0-beta
placement	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top'	The position where the message appears.	0.0.2
position	'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	True	'top'	Deprecated The position where the message appears.	0.0.0-beta
zIndex	number	True		The z-index style of MessageBox.	0.0.0-beta
root	string | HTMLElement	True	'body'	The element where the message is mounted.	0.0.0-beta

MessageBoxEvents

Event	Parameter	Description	Version
update:messages	value: MessageProps[]	v-model updates the messages property.	0.0.0-beta
close	id: string | number | symbol	Callback for closing the message.	0.0.0-beta

MessageBoxExpose

Attribute	Type	Optional	Default	Description	Version
close	(id: number | string | symbol) => void	False		Close the message.	0.0.0-beta

MessageProps

Attribute	Type	Optional	Default	Description	Version
content	ValidContent	True		Message content.	0.0.0-beta
icon	ValidVNodeContent	True		Message icon.	0.0.0-beta
duration	number	True	3000	Duration (ms).	0.0.0-beta
id	number | string | symbol	True		The unique identifier for the message. A random nanoid is used by default.	0.0.0-beta
type	'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice'	True	'normal'	Message type.	0.0.0-beta
color	string	True		Custom primary color. See Supported Color Parsing.	0.0.0-beta
closable	boolean	True	false	Whether the message can be closed.	0.0.0-beta