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 / 默认插槽自定义内容。
内容通过默认插槽传入,优先级高于 description 属性。
关闭事件与重新显示
点击关闭按钮时触发 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 | error | info |
| description | 描述文案(默认插槽优先) | string | |
| closable | 是否可关闭 | boolean | true |
| show-icon | 是否显示类型图标(或提供 icon 插槽时显示图标区) | boolean | false |
| center | 内容水平居中 | boolean | false |
| effect | 视觉风格 | light | dark | light |
Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 描述内容,优先于 description 属性 | — | — |
| title | 标题内容,优先于 title 属性 | — | — |
| icon | 自定义图标(提供时即使未设 show-icon 也显示图标区) | — | — |
| close | 自定义关闭按钮内容 | — | — |
Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| close | 点击关闭按钮触发,随后组件淡出隐藏(不可自行恢复) | (e: Event) => void | — |