Alert 警告提示
展示需要用户关注的信息。支持 4 种语义类型、描边/强调边框变体、可关闭以及顶部横幅模式。
不同类型
通过 type 属性设置信息 info、成功 success、警告 warning、错误 error 四种语义类型。
信息提示
当前版本已更新至 v2.0，请查看发布日志。
成功提示
数据已成功保存到服务器。
警告提示
您的账户余额不足，请注意及时充值。
错误提示
网络请求失败，请检查网络连接后重试。
无标题
省略 title 仅展示纯文本内容，适用于简短的提示信息。
此处仅展示一条简短的信息提示。
操作已成功完成！
请注意，此操作不可逆。
操作失败，请稍后重试。
描边模式
设置 outlined 属性去掉背景色，仅保留边框线框风格。
信息提示
这是一条描边风格的信息提示。
成功提示
这是一条描边风格的成功提示。
警告提示
这是一条描边风格的警告提示。
错误提示
这是一条描边风格的错误提示。
左侧强调边框
设置 border-accent 属性，左侧显示加粗的颜色边框，增强视觉引导。
信息提示
左侧带有粗边框的信息样式。
成功提示
左侧带有粗边框的成功样式。
警告提示
左侧带有粗边框的警告样式。
错误提示
左侧带有粗边框的错误样式。
可关闭
设置 closable 后显示关闭按钮，点击可关闭并触发 close 事件。
可关闭的信息
您可以点击右侧的关闭按钮来关闭此提示。
可关闭的错误
这是一条可关闭的错误提示。
不显示图标
设置 :show-icon=false 隐藏左侧图标区域，适用于信息简洁的场景。
横幅模式
设置 banner 属性以顶部横幅形式展示，边框圆角置零且左右无边框。
自定义图标
通过 icon 插槽自定义左侧图标，图标名称参考 Icon 组件内置列表。
自定义图标
发布成功！新版本已上线。
自定义图标
小提示：按 Ctrl+S 可快速保存。
组合用法
多种属性可自由组合，如同时使用描边 + 强调边框 + 可关闭。
描边 + 强调边框
这是一段组合了描边、左侧强调边框和可关闭功能的警告信息。
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 警告标题，不设置则仅展示内容 |
type | 'info' | 'success' | 'warning' | 'error' | 'info' | 警告语义类型 |
closable | boolean | false | 是否可关闭 |
showIcon | boolean | true | 是否显示左侧图标 |
outlined | boolean | false | 是否为描边风格（无背景色） |
borderAccent | boolean | false | 是否显示左侧加粗强调边框 |
banner | boolean | false | 是否为顶部横幅模式 |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
close | () => void | 关闭时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 警告内容区 |
title | 自定义标题区 |
icon | 自定义左侧图标 |
close-icon | 自定义关闭按钮图标 |