R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

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 / insettop 是 message 常用的顶部偏移快捷写法;需要更细控制时可以直接传 inset。number | string / ToastInset20 / -
gap多条消息之间的间距,适合更密集或更舒展的消息节奏。number | string10
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) | falsedocument.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-
页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS