轻提示

Toast (轻提示) 是一种极简风格的反馈组件。它通常出现在屏幕底部或中间，用于提供“已复制”、“已刷新”等无需用户交互的即时反馈。

与 Message 的堆叠展示不同，Toast 采用 串行调度 (Serial Queue) 机制。这意味着屏幕上同一时间只会显示一个 Toast，后续触发的 Toast 会进入队列排队，等待当前提示消失后自动展示。

基础用法

通过 $tToast 方法即可创建一个轻提示。

import { inject } from 'vue';

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

// 1. 基础文本 (默认 3秒后消失)
$tToast({ content: "已复制到剪贴板" });

// 2. 指定类型
$tToast({ 
  content: "网络连接已恢复", 
  type: "success",
  icon: "ti-wifi"
});

核心特性

队列机制 (Queue)

这是 Toast 最显著的特点。当您在短时间内连续调用 $tToast 时，它们不会像 Message 那样铺满屏幕，而是会像播放列表一样依次展示。

这种机制非常适合移动端或需要保持界面整洁的场景。

// 假设用户快速点击了3次按钮
$tToast({ content: "保存步骤 1..." }); // 立即显示
$tToast({ content: "保存步骤 2..." }); // 等待 1 消失后显示
$tToast({ content: "保存完成" });      // 等待 2 消失后显示

视觉层级 (Tone)

Toast 支持 5 种视觉色调等级，可根据界面的视觉重心进行调整。

• weak: 淡雅风格。
• base (默认): 标准风格。
• strong: 强色调，填充感强。
• strongInvert: 强反色。
• extremeInvert: 极反色，高对比度。

$tToast({ 
  content: "关键操作提醒", 
  type: "warning", 
  tone: "strong" // 使用强色调背景
});

高级样式定制 (Typed)

Toast 组件内部集成了 TuiTyped 样式引擎。通过 typedConfig 参数，您可以透传更底层的样式配置。

$tToast({
  content: "加载中...",
  // 传递给 TuiTyped 的配置
  typedConfig: {
    appearance: 'outline', // 轮廓风格
    round: true            // 全圆角
  }
});

全局方法

$tToast(options)

将一条轻提示加入展示队列。

$tToastClose()

立即关闭当前正在展示的 Toast，并触发队列中的下一条（如果有）。

API 参考

属性名	类型	默认值	说明
content	String	(必填)	提示内容。
type	String	'info'	主题色类型：primary, success, warning, error, info, emphasis 等。
tone	String	'base'	视觉色调。可选值：'weak', 'base', 'strong', 'strongInvert', 'extremeInvert'。
duration	Number	3000	展示时长 (ms)。
onClose	Function	-	关闭时的回调函数。
icon	String	-	自定义图标类名。
hideIcon	Boolean	false	是否隐藏图标。
position	String	'bottom-center'	(受全局配置控制) 弹出位置。
transparent	Boolean	true	是否启用半透明背景。
backgroundBlur	Boolean	true	是否启用背景模糊。
hasShadow	Boolean	true	是否显示阴影。
typedConfig	Object	-	高级样式配置对象，透传给内部的 TuiTyped 组件。
className	String	-	自定义 CSS 类名。
appendTo	String/Object	-	指定挂载容器。

全局配置

全局配置对象 $aToast (或 $attentionConfig.toast) 是响应式的。您可以在运行时动态修改 Toast 的默认行为。

import { inject } from 'vue';

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

const updateToastSettings = () => {
  // 动态修改默认时长和位置偏移
  $aToast.value.duration = 5000;
  $aToast.value.offsetX = 0;
  $aToast.value.offsetY = 100; // 距离底部 100px
};

全局 ESC 监控

为了提供高效且符合直觉的交互体验，本组件深度集成了全局 escCounter 监控。当用户按下 Esc 键时，所有当前显示的通知实例将会被自动销毁。这允许用户通过键盘快速清理屏幕上的临时信息，无需逐个手动点击关闭。