Message 全局提示
Rue 现在把原先散在 Toast 里的 message-like 体验收敛成真正的 Message 组件:使用 Rue 更轻、更贴近页面内容的视觉语气,但把消息组件常用的执行逻辑一次覆盖,包含 静态 open、语义快捷方法、useMessage、局部 holder、按 key 更新、maxCount、Promise-like close handle 和全局 config。
Core API
open / useMessage / config
既能直接静态调用,也能在局部容器内管理消息流。
Flow Control
key 更新、maxCount、thenable
适合把“处理中 → 成功 / 失败”的短反馈串成真正可执行的异步流程。
Visual Tone
Rue 的轻浮层,而不是通知卡片
使用 Rue 的轻提示语言,但把 content、icon、action、closable 都开放给业务层。
何时使用
- 需要比 Toast 更明确的 message API,但又不想把反馈组织成 Notification 卡片。
- 希望在按钮事件或异步流程里直接触发成功、失败、加载、警告等短反馈。
- 同一条消息需要按 key 从“处理中”更新到“完成”,并限制最大同时显示数量。
- 希望使用 Rue 自己的轻量视觉,同时补充成熟 message 组件的执行逻辑。
# 声明式消息栈
把原先 Toast 里的 message-likeDemo 收敛到真正的 Message / Message.Item API。
当前是内容工作台,消息作为更轻的流程反馈悬浮在页面之上。
发布完成,静态资源已刷新。
设计规范已同步到内容工作台。
还有 2 条检查项等待确认。
# 富内容、操作区与自定义图标
保持短反馈定位不变,但 content 可以直接承载 JSX,action、closable、icon 与 variant 都能往上提。
Workspace syncedv2.8
Review pending. 还有 2 个确认项等待处理。
2 items
R
Packaging docs bundle...
# Message.useMessage
把 contextHolder 放进当前面板后,消息就能稳定留在局部 box 内,并支持按 key 更新。
点击上方按钮后,消息会留在当前示例盒子内,并支持同 key 更新与局部销毁。
# Promise-like close handle
loading 返回值既可以直接调用关闭,也可以用 then 串起“关闭后再提示完成”的执行逻辑。
点击“开始批次”创建 loading handle,再点击“完成批次”观察 then resolve。
# 静态 API 与全局配置
这组按钮会把消息直接挂到 document.body;适合最简单的业务回调、发布流程和无需显式 holder 的路径。
Global static API当前种子 0
当前演示会把全局静态消息固定到页面顶部 88px,并把最大并发数限制为 3。
API
Message
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
placement | 声明式容器定位,支持 top、top-start、top-end、bottom、bottom-start、bottom-end 与 center。 | MessagePlacement | 'top' |
top / inset | top 是 message 常用的顶部偏移快捷写法;需要更细控制时可以直接传 inset。 | number | string / ToastInset | 20 / - |
gap | 多条消息之间的间距,适合更密集或更舒展的消息节奏。 | number | string | 10 |
className / style / zIndex | 提供 Toast 根容器能力,适合把消息嵌进局部面板、工作台或示例盒子。 | string / object / number | string | - |
Message.Item / open(config)
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
content / children | 主内容字段;未传 children 时会自动把 content 渲染进消息正文。 | any | - |
type | 支持 neutral、success、info、warning、error、loading 六种状态。 | 'neutral' | 'success' | 'info' | 'warning' | 'error' | 'loading' | 'neutral' |
variant / icon / showIcon | 复用 Rue 当前轻提示视觉语气,并允许覆盖默认图标。 | 'soft' | 'solid' | 'outline' / any / boolean | 'soft' / 自动判断 |
duration / pauseOnHover | 自动关闭时长,单位秒;0 会保持打开,悬停默认暂停倒计时。 | number | null / boolean | 实例默认值 / true |
action / closable / closeIcon | 补充轻量操作区与关闭按钮,适合回撤、查看详情或静默关闭。 | any / boolean / any | - / false / - |
onClose / onClick / className / style | 监听关闭、点击并定制单条消息样式。 | function / function / string / object | - |
key | 用于 open(config) 或静态 API 复用同一条消息并原位更新。 | string | number | 自动生成 |
useMessage / static methods
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
Message.useMessage(options) | 返回 [api, contextHolder],适合把消息约束在局部容器内,并复用 placement、duration、maxCount 等默认值。 | (options) => [MessageInstance, any] | - |
getContainer | 默认挂到 document.body;传 false 时会退回到 contextHolder 所在容器。 | string | HTMLElement | (() => HTMLElement) | false | document.body |
open(config) | 创建或按 key 更新一条消息,返回可调用、可 then 的 MessageHandle。 | (config: MessageOpenConfig) => MessageHandle | - |
success / info / warning / error / loading | 快捷方法支持 content、duration、onClose 三参数,也支持直接传配置对象。 | (...args) => MessageHandle | - |
MessageHandle | 返回值同时是函数和 PromiseLike;关闭后 then 会 resolve,便于串接异步流程。 | (() => void) & PromiseLike<boolean> | - |
destroy(key?) | 销毁指定 key;不传 key 时清空当前实例或全局静态实例下的消息。 | (key?: string | number) => void | - |
Message.config(options) | 配置全局静态消息实例的 placement、top、duration、maxCount、closable 等默认值。 | (options: MessageConfigOptions) => void | - |