Message

Message is the most fundamental global feedback component. It is typically used for feedback prompts after active operations (such as "Save successful" or "Delete failed"). It appears at the top of the page in a lightweight, non-modal form and automatically disappears after a default of 3 seconds without interrupting user operations.

Basic Usage

A message instance can be created using the $tMessage method.

import { inject } from 'vue';

const { $tMessage } = inject('$global');

// 1. Basic text
$tMessage({ content: "This is a common message" });

// 2. Specify type (automatically matches corresponding icon and color)
$tMessage({ 
  content: "Data saved successfully", 
  type: "success" 
});

Advanced Features

Visual Tone (Tone)

In addition to standard semantic types, Message supports adjusting visual intensity through the tone property to adapt to different background colors or emphasis needs.

Supported tone values:

• weak: Elegant, suitable for minimalist styles.
• base (default): Standard, providing the best sense of balance.
• strong: Strong tone with a more filled feel.
• strongInvert: Strong inverted color.
• extremeInvert: Extremely inverted color with high contrast.

$tMessage({ 
  content: "High contrast reminder", 
  type: "primary",
  tone: "strong" 
});

Callback Functions

The component supports an onClose callback function, which is triggered when the message is closed (whether due to the timer ending or manual user interaction).

$tMessage({
  content: "Operation completed",
  type: "success",
  onClose: () => {
    console.log("Message closed, starting next operation...");
    router.push('/home');
  }
});

Message Grouping (Grouping)

When multiple messages with identical content are triggered consecutively in a short period, enabling grouping merges them into a single message with a count badge to avoid screen flooding.

// Calling 3 times consecutively; only one box appears with a count of 3 on the right
$tMessage({ content: "Save successful", grouping: true, type: "success" });

Stacking and Position

Message belongs to the Parallel Channel of the dispatcher. Multiple messages will stack vertically automatically. You can change the popup position via the position parameter.

$tMessage({ 
  content: "Message popping up from the bottom", 
  position: "bottom-center" 
});

Global Methods

$tMessage(options)

Creates and displays a message. It returns an instance object containing a destroy() method.

$tMessageCloseAll()

Immediately closes all currently displayed message instances.

API Reference

Property	Type	Default	Description
content	String	(Required)	Text content of the message.
type	String	'info'	Message type: primary, success, warning, danger/error, info, emphasis, focus.
tone	String	'base'	Visual tone. Options: 'weak', 'base', 'strong', 'strongInvert', 'extremeInvert'.
duration	Number	3000	Display time (ms). Set to 0 to prevent automatic closing.
onClose	Function	-	Callback function upon closing.
position	String	'top-center'	Popup position. Options: top, top-left, top-right, bottom, bottom-left, bottom-right, and corresponding center combinations.
grouping	Boolean	false	Whether to merge messages with identical content.
showClose	Boolean	true	Whether to show a close button (recommended if duration is 0).
icon	String	-	Custom icon class name (overrides default type icon).
hideIcon	Boolean	false	Whether to hide the icon.
transparent	Boolean	true	Whether to enable a semi-transparent background.
backgroundBlur	Boolean	true	Whether to enable background blur (Backdrop Filter).
hasShadow	Boolean	true	Whether to show a shadow.
shadowColor	String	'weak'	Shadow intensity level.
className	String	-	Custom CSS class name.
appendTo	String/Object	-	Specifies the mounting container. Defaults to the global floating layer container.

Global Configuration

The global configuration object $attentionConfig is reactive. You can dynamically modify configurations at runtime, and the settings will apply immediately to newly created messages.

import { inject } from 'vue';

const { $attentionConfig } = inject('$global');

const updateConfig = () => {
  // Dynamically modify default position and duration
  $attentionConfig.value.message.position = "top-right";
  $attentionConfig.value.message.duration = 5000;
  $attentionConfig.value.message.offset = 30; // Initial top spacing
};

Global ESC Monitoring

The component is deeply integrated with global escCounter monitoring to provide an efficient and intuitive interaction experience. When a user presses the Esc key, all currently displayed notification instances are automatically destroyed. This allows users to quickly clear temporary screen information via the keyboard without clicking close buttons individually.