提示 Alert
一个用于显示重要信息或操作反馈的消息栏组件。
提示类型
Alert 支持多种类型：'info'（默认）、'success'、'warning'、'error'、'loading'、'normal'、'sakura'、'notice'。
Sakura
Normal
隐藏源代码
提示变体
Alert 有两种样式变体：'plain'（默认）和 'primary'。
Sakura
Normal
隐藏源代码
文本对齐
通过设置 textAlign 控制内容对齐：'start'、'center' 或 'end'。
隐藏源代码
标题
可使用 title 属性或 title 插槽在内容上方显示显眼的标题。
Title
SakuraTitle
Normal隐藏源代码
可关闭
设置 closable 会显示关闭图标，点击时组件会触发 close 事件。
Sakura
Normal
隐藏源代码
图标
通过设置 iconPlacement 设置图标位置：'start' 或 'text-leading'；通过 showIcon 控制图标显示；可通过 icon 插槽自定义图标。
No Icon
隐藏源代码
自定义颜色
设置 color 可以自定义主色，组件会基于此生成完整色板，该色板优先于主题预设。详见 支持的颜色解析。
隐藏源代码
形状 & 圆角边框
通过 shape 控制提示组件形状。
borderRadius 设置 Alert 的圆角，优先级高于 shape，与 CSS border-radius 行为一致：
- 单值或长度为 1 的数组 → 同时应用到四个角
- 长度为 2 的数组 → [左上 & 右下, 右上 & 左下]
- 长度为 3 的数组 → [左上, 右上 & 左下, 右下]
- 长度为 4 的数组 → 按顺时针从左上角依次应用
Sakura
隐藏源代码
API
AlertProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | 是 | | 圆角半径，优先级高于 shape，行为与 CSS border-radius 一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。 | 0.1.0 |
| shape | 'rect' | 'round' | 是 | 'rect' | 组件形状，可选 'rect' 或 'round'。 | 0.1.0 |
| variant | 'primary' | 'plain' | 是 | 'plain' | 样式变体，'primary' 或 'plain'。 | 0.1.0 |
| type | 'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice' | 是 | 'primary' | 警告的类型（主题）。 | 0.1.0 |
| textAlign | 'start' | 'center' | 'end' | 是 | 'start' | 文本对齐，'start' / 'center' / 'end'。 | 0.1.0 |
| title | string | 是 | | 标题文本或通过 title 插槽提供。 | 0.1.0 |
| color | string | 是 | | 自定义主色，详见 支持的颜色解析。 | 0.1.0 |
| closable | boolean | 是 | false | 是否显示关闭图标。 | 0.1.0 |
| iconPlacement | 'start' | 'text-leading' | 是 | 'text-leading' | 图标位置，'start' 或 'text-leading'。 | 0.1.0 |
| showIcon | boolean | 是 | 'true' | 是否显示图标。 | 0.1.0 |
| pollSizeChange | boolean | 是 | false | 是否启用尺寸轮询，可能影响性能。 | 0.1.0 |
AlertEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| close | e: MouseEvent | 关闭图标点击事件，回调参数为 MouseEvent。 | 0.1.0 |
AlertSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | 内容插槽。 | 0.1.0 |
| title | | 标题插槽。 | 0.1.0 |
| icon | | 图标插槽。 | 0.1.0 |
NumberOrPercentage
ts
export type NumberOrPercentage = number | `${number}%`