Alert 提示

提示（Alert）用于向用户传达重要的反馈信息，如操作成功、系统警告、错误提示等。

基础用法

使用 type 属性来定义警告提示的语义级别。组件会自动为您匹配最合适的 Tabler 图标和配色。

<TAlert type="success" description="数据保存成功！"/>
<TAlert type="info" description="您有一条新的系统通知。"/>
<TAlert type="warning" description="请注意，该操作可能会影响您的账号数据。"/>
<TAlert type="danger" description="发生网络错误，请稍后重试。"/>

带有图标和标题

当你需要传递的信息比较丰富时，可以通过 icon 和 title 属性来构建结构更清晰的警告提示。

此时描述内容会自动变为次级灰色，以突出标题层级。

<TAlert type="success" title="支付成功" :icon="IconClipboardTypography">
  您的订单已成功支付，我们将尽快为您安排发货。
</TAlert>
<TAlert type="danger" title="账号已被冻结" :icon="IconShieldHalfFilled">
  检测到异常的登录行为。请联系客服解冻。
</TAlert>

强调风格 (Important)

开启 important 属性可以让提示框在视觉上更具分量。

通常它会应用纯色背景或加粗的侧边框，具体取决于其自身的色彩类型。

这非常适合那些用户绝对不能错过的最高级别警告。

<TAlert important type="primary" title="系统升级通知">
  系统将于今晚 12:00 进行停机维护，预计持续 2 小时。
</TAlert>
<TAlert important type="danger" title="严重错误">
  数据库连接失败，请立即检查服务器状态！
</TAlert>

自定义图标

虽然组件会自动推导图标，但你完全可以通过 icon 属性传入自定义的 Tabler 图标，或者通过 showIcon="false" 将其彻底隐藏。

<TAlert type="warning" :icon="IconFlame" title="热门警告" description="..."/>
<TAlert type="success" :showIcon="false" description="这是一个完全没有图标的极简提示。"/>

嵌套其他组件 (利用插槽)

因为图标区域完全暴露为了 #icon 插槽，所以你不仅可以放入 SVG 图标，还可以放入任何其他的 Vue 组件。

比如，配合 TAvatar 头像组件，你可以轻松用警告框来构建一条具有强提示性的用户留言或系统对话：

<TAlert color="blue" :closable="false">
  <template #icon>
    <TAvatar src="/avatar.png"></TAvatar>
  </template>
  电话里：“This is a wrong number. Please check up and take the telephone number again…….”<br/>
  电话外：“孩子，你为什么每天都说外语，妈听不懂，但是妈很想你……..”
</TAlert>

可关闭的提示

closable 属性默认开启，右侧会显示一个关闭按钮。

你可以通过监听 @close 事件来处理自己的业务逻辑。

查看代码

<script setup lang="ts">
  import {ref} from "vue";
  import {TAlert, TButton, TButtonGroup} from 'tabler-vue';

  const isClosable = ref(true);
  const isClose = ref(true);
  // 也可以在@close上使用事件 `@close='handleClose'`
  // const handleClose = () => {
  //   isClose.value = false;
  // };
</script>
<template>
  <TButtonGroup v-if="isClose">
    <TButton @click="isClosable=true">允许关闭</TButton>
    <TButton @click="isClosable=false">禁止关闭</TButton>
  </TButtonGroup>
  <br><br>
  <TAlert type="info" title="关闭事件" :closable="isClosable" @close="isClose.value = false">
    当您关闭当前提示时，上方的操作按钮也会一同消失哦。
  </TAlert>
</template>

API

TAlert 属性 (Props)

属性名	说明	类型	默认值
type	提示框的状态类型，自动映射颜色与默认图标。	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	'info'
title	提示框的标题内容。	string	undefined
description	提示框的描述内容（如果使用默认插槽，此属性会被覆盖）。	string	undefined
icon	自定义左侧图标的 Vue 组件实例。	Icon	undefined
showIcon	是否显示左侧图标。	boolean	true
color	强制指定警告框的颜色（优先级高于 type）。	TablerColor	undefined
important	是否启用高饱和的纯色强调风格。	boolean	false
closable	是否显示关闭按钮，并支持手动关闭。	boolean	true

TAlert 事件 (Emits)

事件名	说明	回调参数
close	当用户点击关闭按钮，提示框消失时触发。	() => void

TAlert 插槽 (Slots)

插槽名	说明
default	提示框的描述内容（替代 description 属性）。
title	自定义标题（替代 title 属性）。
icon	自定义图标（替代 icon 属性）。