Message Component

Message component is used to display operation feedback or system prompts on the page, supporting multiple message types and styles, can automatically disappear or be manually closed, and is a lightweight feedback method.

Basic Usage

Basic message prompts, including four types: success, warning, info, and error.

The message component provides four different types for feedback in different scenarios.

Show Code

Message Style

You can customize the message width, padding, icon, and plain style.

The message component supports custom styles, such as width, padding, icon and plain style.

Show Code

Notification Type

Supports notification message display in four directions, can include title and content.

Message notification supports popup in four directions, suitable for scenarios that require stronger prompt effects.

Popup Position

Notification Type

Show Code

Close Configuration

Supports multiple closing methods including manual close, auto close, and close by pressing ESC key.

Message supports multiple closing methods configuration, including manual close, ESC key close and auto close.

Tips:

• Manual Close: Set duration: 0 and isClose: true to display permanently and close manually
• ESC Key Close: Set closeOnPressEscape: true to enable ESC key close function
• Auto Close: Set duration to specified milliseconds to achieve auto close

Show Code

Custom Configuration

You can customize the message mount position and display position.

The message component supports custom mount container and display position.

Custom Mount Container

Specify the DOM node where the message is mounted by setting the appendTo property

Custom mount container, messages will be displayed here

Custom Display Position

Specify the display coordinates of the message by setting the custom property

Show Code

Event Handling

Message provides close callback events and supports stacked display of multiple messages.

The message component provides close callback events and supports multiple message stacking display.

Close Callback

Multiple Message Stacking

Show Code

Message API

Message Methods

Method Name	Description	Parameters	Return Value
TMessage.message	Display normal message	(content: string, type?: string, options?: object) => string	Unique ID of message instance
TNotification.message	Display notification message	(title: string, content: string, type?: string, options?: object) => string	Unique ID of message instance

Message Configuration

Attribute	Description	Type	Accepted Values	Default
type	Message type	string	success / warning / info / danger	info
plain	Whether to use plain style	boolean	true / false	false
messageType	Message display mode	string	default / notice	default
title	Title (available in notification mode)	string	—	—
position	Position (available in notification mode)	string	topRight / bottomRight / bottomLeft / topLeft	topRight
content	Message content	string	—	—
icon	Icon type	string	—	Auto-selected by type
duration	Display duration (ms)	number	—	2600
radius	Border radius size	array / number	—	[6, 6, 6, 6]
padding	Padding size	array / number	—	[8, 12, 8, 12]
width	Message box width	string	—	—
appendTo	Target position for message rendering	string / element	—	body
custom	Custom position coordinates	object {x: string, y: string}	—	{x: "50%", y: "24px"}
maxLength	Maximum number of messages	number	—	8
isClose	Whether to show close button	boolean	true / false	false
closeCallback	Close callback function	function(id: string)	—	—
closeOnPressEscape	Whether to support ESC key close	boolean	true / false	true

Events

Event Name	Description	Callback Parameters
close	Triggered when message closes	(id: string)
click	Triggered when message is clicked	(event: MouseEvent)

Slots

Slot Name	Description
default	Message content
icon	Custom icon
close	Custom close button

Methods

Method Name	Description	Parameters
closeMessage	Close message	—

Style Variables

The message component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color - Primary
$theme-color-success	Theme color - Success
$theme-color-info	Theme color - Info
$theme-color-warning	Theme color - Warning
$theme-color-danger	Theme color - Danger
$color-white	White color
$bg-color-default	Default background color
$bg-color-model	Modal background color
$text-color-default	Default text color
$z-index-up	Upper layer z-index