Alert 警告提示
警告提示,展现需要关注的信息。
何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
基本使用
含有辅助性文字介绍
显示图标
可关闭
顶部公告(banner)
banner 模式去边框、改背景,常用于页面顶部的全局提示。
自定义关闭文字
close-text 替换默认的 × 按钮,常用于"知道了" / "我已了解"等业务文案。
图标 + 描述完整版
show-icon + description + closable 三者组合是最饱满的提示形式。
长内容自动换行
message 与 description 都会随容器宽度自动换行。
表单顶部错误汇总(业务场景)
复杂表单提交失败时,把所有错误项放在顶部 Alert,便于用户快速定位。
行内嵌入卡片
Alert 嵌在卡片或表单内部,作为局部提示。
Alert 参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | 'success' / 'info' / 'warning' / 'error' | 'info' | 类型 |
| message | string | -- | 警告主标题 |
| description | string | -- | 辅助性文字描述 |
| showIcon | boolean | false | 是否显示图标 |
| closable | boolean | false | 默认显示关闭按钮 |
| closeText | string | -- | 自定义关闭按钮文本 |
| banner | boolean | false | 是否用作顶部公告 |
Alert 事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| close | -- | 关闭按钮被点击 |