Alert 警告提示

何时使用

需要向用户展示警告、错误、成功等提示信息时。
需要页面级或 banner 形式的提示时。

基础用法

提示

这是一条信息提示。

成功

操作已完成。

警告

请注意检查输入。

错误

操作失败，请重试。

<template>
  <Alert title="提示" type="info" description="这是一条信息提示。" />
  <Alert title="成功" type="success" description="操作已完成。" />
  <Alert title="警告" type="warning" description="请注意检查输入。" />
  <Alert title="错误" type="error" description="操作失败，请重试。" />
</template>

导入

import { Alert } from "@reglow/reui";

Props

属性	类型	默认值	说明
`type`	`"info" \| "success" \| "warning" \| "error"`	`"info"`	类型
`variant`	`AlertVariant`	`"outlined"`	变体（outlined 描边 / filled 填充）
`title`	`string`	-	标题（也可用同名插槽）
`description`	`string`	-	辅助说明文字（也可用同名插槽或默认插槽）
`showIcon`	`boolean`	`false`	是否显示图标（banner 模式默认 `true`）
`banner`	`boolean`	`false`	是否用作顶部公告
`closable`	`boolean`	`false`	是否可关闭（触发 `close` / `afterClose`）
`icon`	`class`	-	自定义图标 class

事件

事件	说明
`close`	点击关闭按钮时触发
`afterClose`	关闭动画结束后触发

插槽

名称	说明
`title`	标题内容
`description`	辅助说明内容
`icon`	自定义图标
`action`	右侧操作区
`closeIcon`	自定义关闭图标

内容锚点

何时使用
基础用法
导入
Props
事件
插槽