Notification

Notification is a feedback component used to present important system-level information. Unlike the lightweight Message component, Notification supports separate displays for Title and Content, typically defaults to the top-right corner of the screen, and generally does not close automatically until confirmed or manually dismissed by the user.

It is ideal for scenarios requiring clear user awareness, such as "new order alerts," "version update notifications," and "task execution results".

Basic Usage

A notification instance can be created using the $tNotify method.

import { inject } from 'vue';

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

// 1. Basic notification (Content only)
$tNotify({ content: "You have a new to-do item" });

// 2. Standard notification with a title
$tNotify({ 
  title: "System Maintenance", 
  content: "The server will undergo routine maintenance at 00:00 tonight. Please save your data in advance.",
  type: "warning" 
});

Advanced Features

Visual Tone (Tone)

Notification supports five visual tone levels that work with the type property to adapt to different background complexities or emphasis requirements:

• weak: Weakens the background, suitable for non-intrusive notifications.
• base (default): Standard intensity.
• strong: Strong tone with high saturation.
• strongInvert: Strong inverted color.
• extremeInvert: Extremely inverted color, used for the highest level of visual emphasis.

$tNotify({
  title: "Disk Space Alert",
  content: "Remaining space is less than 5%",
  type: "danger",
  tone: "strong" // Uses a strong tone background
});

Manual Closing and Callbacks

By default, the duration for a Notification is 0 (it will not close automatically). You can use the onClose callback to listen for the user's closing action.

$tNotify({
  title: "File Export",
  content: "Click close to clear this message",
  onClose: () => {
    console.log("User has read the notification, executing cleanup logic...");
  }
});

Automatic Closing

If you want a notification to disappear automatically like a Message, you can set the duration in milliseconds.

// Automatically close after 15 seconds
$tNotify({
  title: "Auto Save",
  content: "Draft has been saved",
  duration: 15000 
});

Notification Grouping (Grouping)

When multiple notifications with identical titles and content are triggered consecutively, enabling grouping merges them into one. This is highly useful for managing high-frequency system messages, such as continuous error reports.

// When triggered consecutively, only one notification box appears with a count badge
$tNotify({ 
  title: "Connection Timeout", 
  content: "Attempting to reconnect to the server...", 
  type: "error",
  grouping: true 
});

Global Methods

$tNotify(options)

Creates and displays a notification. It returns an instance object containing a destroy() method for manual early closure.

const notify = $tNotify({ title: "Uploading...", content: "Progress 0%", duration: 0 });

// Simulate closing after a progress update
setTimeout(() => {
  notify.destroy();
}, 2000);

$tNotifyCloseAll()

Immediately closes all currently displayed Notification instances.

API Reference

Property	Type	Default	Description
title	String	-	Notification title, displayed in bold.
content	String	(Required)	Detailed notification content.
type	String	'info'	Theme color type: primary, success, warning, danger/error, info, emphasis, etc.
tone	String	'base'	Visual tone. Options: 'weak', 'base', 'strong', 'strongInvert', 'extremeInvert'.
duration	Number	0	Display time (ms). 0 means it will not close automatically.
onClose	Function	-	Callback function triggered upon closing.
position	String	'top-right'	Popup position. Options include: top-right, top-left, bottom-right, bottom-left, etc.
grouping	Boolean	false	Whether to merge notifications with identical content.
showClose	Boolean	true	Whether to show the close button.
icon	String	-	Custom icon class name.
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.
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.

Global Configuration

The global configuration object $attentionConfig is reactive. Modifying the default settings will immediately affect subsequently created notifications.

import { inject } from 'vue';

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

const changeConfig = () => {
  // Dynamically modify default position and duration
  $attentionConfig.value.notification.position = "bottom-right";
  $attentionConfig.value.notification.duration = 10000;
  $attentionConfig.value.notification.offset = 30;
};

Global ESC Monitoring

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