Alert 警告 | Tuff Docs

用法

类型

type 决定配色与默认图标。

示例加载中...

常驻提示

属于页面状态、不应被关闭的提示设置 closable=false。

<template>
  <TxAlert
    type="warning"
    title="需要人工复核"
    message="此发布包含未签名产物。"
    :closable="false"
  />
</template>

自定义标题与正文

<template>
  <TxAlert type="success" @close="dismissed = true">
    <template #title>
      运行时证据已收集
    </template>

    <p>
      Preview 检查通过。可在 evidence 面板查看截图和 trace。
    </p>
  </TxAlert>
</template>

纯文本

<template>
  <TxAlert :show-icon="false" message="此页面展示本地 demo 数据。" />
</template>

最佳实践

页面上下文反馈用 Alert，瞬时的操作结果用 Toast。
按用户影响选择 type：失败用 error，风险用 warning，中性引导用 info。
合规、阻塞或始终相关的提示设置 closable=false；需要记住关闭状态时在 close 中持久化。
文案简短、可执行，不要同时挂载多个新 Alert。
操作按钮放在 Alert 之后，不放进正文。

API 参考

属性

属性名	类型	默认值	说明
`type`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	语义类型，决定配色与默认图标。
`title`	`string`	-	标题；未设置且无 `title` 插槽时不渲染标题行。
`message`	`string`	-	正文；默认插槽优先。
`closable`	`boolean`	`true`	显示关闭按钮。
`showIcon`	`boolean`	`true`	显示前置语义图标。

事件

事件名	参数	说明
`close`	-	点击关闭按钮时触发。

插槽

插槽名	Props	说明
`title`	-	自定义标题。
`default`	-	自定义正文，替换 `message`。

暴露方法

名称	类型	说明
`open`	`() => void`	重新显示已关闭的 Alert。
`close`	`() => void`	隐藏 Alert 并派发 `close`。

概述

根节点为 role="alert"，挂载时读屏器立即播报。
type 对应的图标为 info、check-circle、alert-triangle、x-circle，均为 TxIcon 内置图标，无需图标字体。
点击关闭按钮会隐藏自身并派发 close；宿主仍可用 v-if 控制显示。
只过渡 opacity 与 transform，不收拢高度；需要收拢空位时用 <TransitionGroup> 包裹。
减少动态效果时只淡入淡出，不位移。
关闭按钮只有图标，带 aria-label="Close"。

技术实现

根节点带 tx-alert--<type> 与 tx-alert--closable class，外层是 <Transition name="tx-alert" appear>；透传属性落在 .tx-alert 上。
源码：packages/tuffex/packages/components/src/alert/。

查看源码

packages/tuffex/packages/components/src/alert/index.ts