项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
仅桌面端保证样式

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 ​

Alert Props

参数说明类型默认值
title标题string
type类型,primary 视觉同 info,error 同 danger 色primary | success | warning | info | errorinfo
description描述文案(默认插槽优先)string
closable是否可关闭booleantrue
show-icon是否显示类型图标(或提供 icon 插槽时显示图标区)booleanfalse
center内容水平居中booleanfalse
effect视觉风格light | darklight

Slots

参数说明类型默认值
default描述内容,优先于 description 属性——
title标题内容,优先于 title 属性——
icon自定义图标(提供时即使未设 show-icon 也显示图标区)——
close自定义关闭按钮内容——

Events

参数说明类型默认值
close点击关闭按钮触发,随后组件淡出隐藏(不可自行恢复)(e: Event) => void—