---
url: /components/alert.md
---
# Alert 警告提示

页面内的非阻断提示，用于展示需要用户关注但无需立即处理的信息。支持 5 种语义类型（success / warning / info / error / primary，primary 视觉同 info）与 light / dark 两种视觉风格，可带图标、描述与关闭按钮，关闭自带淡出过渡。注意：关闭由组件内部状态控制，关闭后不会自行恢复，需重新挂载（如更换 key）。

## 基础用法

四种语义类型：`title` 加粗为标题，`description` 提供常规灰色描述文案；`closable` 置为 false 隐藏关闭按钮。

关闭按钮点击后组件淡出并从页面移除；需要常驻的提示可关闭 `closable`，或在外层监听 `close` 事件做业务兜底。

## light 与 dark 主题

`effect` 控制视觉风格：light 为浅色底 + 语义色文字（默认），dark 为语义色实底 + 白色文字，适合强提醒场景。

## 图标与居中

`show-icon` 在左侧显示与 `type` 对应的图标（success 对应对勾、warning 对应叹号等填充图标），`center` 让内容水平居中；也可通过 `#icon` 插槽自定义图标、`#title` / 默认插槽自定义内容。

## 关闭事件与重新显示

点击关闭按钮时触发 `close` 事件（入参为原始鼠标事件），随后组件淡出隐藏。由于关闭是组件内部行为，重新显示需重新挂载组件（示例通过更换 key 实现）。

## 标题与描述插槽

`#title` 插槽自定义标题（优先于 title 属性），默认插槽自定义描述内容，可承载链接、按钮等富内容。

## primary 类型与类型映射

`type` 还接受 primary，视觉与 info 一致，便于与按钮等语义色直接对应；图标按类型自动映射：success / warning / info / error 分别对应圆打勾、叹号、叹号、圆叉的填充图标。

## API