项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
双端兼容 · 桌面 + 移动

Message 全局提示 ​

命令式全局消息:通过 $message()(或导入 EbMessage)在页面顶部居中弹出轻提示,多条自动垂直堆叠重排,关闭后其余消息即时上移补位;提供 success / warning / info / error 快捷方法、grouping 合并同文案、showClose 手动关闭、duration 控制时长与 html 片段渲染。

基础用法 ​

四种类型由快捷方法一键触发,图标与配色随类型自动匹配;未指定类型时按 info 展示。

多种调用形式 ​

支持三种入参:纯字符串(等价 info)、options 对象精细控制、字符串 + options 混用(后者仅覆盖 message 与快捷方法类型)。

显示时长与可关闭 ​

duration 控制自动关闭毫秒数(默认 3000,设 0 则不自动关闭);showClose 显示右侧关闭按钮,配合 duration 0 可常驻提示;$message.close() 一键关闭当前全部实例。

居中展示 ​

center: true 时图标与文案整体居中,适合空屏引导类轻提示。

消息堆叠 ​

多条消息自上而下按 16px 间距垂直堆叠,任一条关闭后其余消息平滑上移补位,无需手动管理层级;层级 zIndex 自增分配,始终覆盖页面内容。

合并相同消息 ​

grouping: true 时再次弹出同类型同文案的消息不会新增一条,而是复用现有实例并重置关闭计时,适合轮询刷新、重复提交等场景。

HTML 内容与关闭回调 ​

html: true 时 message 按 HTML 片段渲染(内容必须可信,警惕 XSS 注入);onClose 在消息关闭(自动到期或手动)时回调。

组合场景:删除操作反馈 ​

真实业务的常见组合:发起时 info 提示、成功 success、失败 error 并附带 showClose 便于用户看清失败原因,三种状态共用一套交互语言。

API ​

以下 options 适用于全部调用形式;纯字符串调用时仅 message 生效,其余字段取默认值。

Message Options

参数说明类型默认值
message消息文本(调用参数为纯文本时自动写入此字段)string
type类型,决定图标与配色info | success | warning | errorinfo
duration显示时长(毫秒),0 表示不自动关闭number3000
show-close显示关闭按钮booleanfalse
center文字居中booleanfalse
grouping合并同类型同文案的活动实例(重置计时)booleanfalse
html以 HTML 片段渲染 message(内容由调用方负责转义)booleanfalse
on-close消息关闭回调(自动或手动均触发)() => void—
z-index / on-destroy内部注入参数(弹层层级 / 卸载回调),无需手动传入number / Function—

Static Methods

参数说明类型默认值
$message(options) / $message(message, options)弹出消息,返回实例 handle(options: object | string) => { close }—
$message.success / warning / info / error按类型快捷弹出(参数为 message 与可选 options)(message, options?) => { close }—
$message.close()关闭当前全部消息(与 closeAll 等价)() => void—
$message.closeAll()close 的别名() => void—
handle.close()调用返回值关闭对应单条消息() => void—