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 | error | info |
| duration | 显示时长(毫秒),0 表示不自动关闭 | number | 3000 |
| show-close | 显示关闭按钮 | boolean | false |
| center | 文字居中 | boolean | false |
| grouping | 合并同类型同文案的活动实例(重置计时) | boolean | false |
| html | 以 HTML 片段渲染 message(内容由调用方负责转义) | boolean | false |
| 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 | — |