TechUI Docs

简中

EN

简中

EN

主题

消息 ​

Message (消息) 是最基础的全局反馈组件。它通常用于主动操作后的反馈提示（如“保存成功”、“删除失败”），以轻量级、非模态的形式出现在页面顶部，默认 3 秒后自动消失，不打断用户操作。

基础用法 ​

通过 $tMessage 方法即可创建一个消息实例。

javascript
import { inject } from 'vue';

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

// 1. 基础文本
$tMessage({ content: "这是一条普通消息" });

// 2. 指定类型 (会自动匹配对应的图标和颜色)
$tMessage({ 
  content: "数据保存成功", 
  type: "success" 
});

进阶特性 ​

视觉层级 (Tone) ​

除了标准的语义类型（Type）外，Message 还支持通过 tone 属性调整视觉强弱，以适应不同的背景色或强调需求。

支持的色调值：

  • weak: 淡雅，适合极简风格。
  • base (默认): 标准，平衡感最好。
  • strong: 强色调，填充感更强。
  • strongInvert: 强反色。
  • extremeInvert: 极反色，高对比度。
javascript
$tMessage({ 
  content: "高对比度提醒", 
  type: "primary",
  tone: "strong" 
});

回调函数 ​

支持传入 onClose 回调函数，当消息关闭（无论是倒计时结束还是用户手动点击）时触发。

javascript
$tMessage({
  content: "操作完成",
  type: "success",
  onClose: () => {
    console.log("消息已关闭，开始下一步操作...");
    router.push('/home');
  }
});

消息分组 (Grouping) ​

当短时间内连续触发多条内容相同的消息时，开启 grouping 可以将它们合并为一条，并显示计数徽标，避免刷屏。

javascript
// 连续调用3次，界面上只会显示一个消息框，右侧计数为 3
$tMessage({ content: "保存成功", grouping: true, type: "success" });

堆叠与位置 ​

Message 属于调度器的 并行通道。多条消息会自动垂直堆叠。您可以通过 position 参数改变其弹出位置。

javascript
$tMessage({ 
  content: "底部弹出的消息", 
  position: "bottom-center" 
});

全局方法 ​

$tMessage(options) ​

创建并显示一条消息。返回一个包含 destroy() 方法的实例对象。

$tMessageCloseAll() ​

立即关闭当前所有显示的消息实例。

API 参考 ​

属性名类型默认值说明
contentString(必填)消息文本内容。
typeString'info'消息类型：primary, success, warning, danger/error, info, emphasis, focus。
toneString'base'视觉色调。可选值：'weak', 'base', 'strong', 'strongInvert', 'extremeInvert'。
durationNumber3000显示时间 (毫秒)。设为 0 则不会自动关闭。
onCloseFunction-关闭时的回调函数。
positionString'top-center'弹出位置。可选：top, top-left, top-right, bottom, bottom-left, bottom-right 以及对应的 center 组合。
groupingBooleanfalse是否合并相同内容的消息。
showCloseBooleantrue是否显示关闭按钮 (当 duration 为 0 时建议开启)。
iconString-自定义图标类名（覆盖默认类型图标）。
hideIconBooleanfalse是否隐藏图标。
transparentBooleantrue是否启用半透明背景。
backgroundBlurBooleantrue是否启用背景模糊 (Backdrop Filter)。
hasShadowBooleantrue是否显示阴影。
shadowColorString'weak'阴影强度等级。
classNameString-自定义 CSS 类名。
appendToString/Object-指定挂载容器。默认使用全局配置的浮动层容器。

全局配置 ​

全局配置对象 $attentionConfig 是响应式的。您可以在运行时动态修改配置，修改后的设置将立即对新创建的消息生效。

javascript
import { inject } from 'vue';

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

const updateConfig = () => {
  // 动态修改默认位置和时长
  $attentionConfig.value.message.position = "top-right";
  $attentionConfig.value.message.duration = 5000;
  $attentionConfig.value.message.offset = 30; // 顶部初始间距
};

全局 ESC 监控 ​

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