Message 消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

基础用法

从顶部出现，3 秒后自动消失。

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。

可关闭

可以添加关闭按钮。

文字居中

使用 center 属性让文字水平居中。

使用 HTML 片段

dangerouslyUseHTMLString 属性设置为 true，message 就会被当作 HTML 片段处理。

消息合并

如果设置了 grouping 为 true，那么内容相同的消息将合并显示。

朴素模式 (Unique Feature)

设置为 plain 模式，背景变为白色，更清爽。

自定义位置 (Unique Feature)

可以通过 position 属性设置消息出现的位置。支持 top-right, top-left, bottom-right, bottom-left, top-center (默认), bottom-center。

无图标 (Unique Feature)

可以通过 showIcon 属性设置为 false 来隐藏图标。

API

Message Options

属性名	说明	类型	默认值
message	消息文字	string / VNode	''
type	主题	'success' / 'warning' / 'info' / 'error'	'info'
icon	自定义图标	string / Component	''
dangerouslyUseHTMLString	是否将 message 属性作为 HTML 片段处理	boolean	false
customClass	自定义类名	string	''
duration	显示时间, 毫秒。设为 0 则不会自动关闭	number	3000
showClose	是否显示关闭按钮	boolean	false
center	文字是否居中	boolean	false
onClose	关闭时的回调函数, 参数为被关闭的 message 实例	function	-
offset	Message 距离窗口顶部的偏移量	number	16
appendTo	设置 Message 的根元素	HTMLElement / string	document.body
grouping	是否合并内容相同的消息，不支持 VNode	boolean	false
plain	是否开启朴素模式	boolean	false
position	自定义位置	'top-right' / 'top-left' / 'bottom-right' / 'bottom-left' / 'top-center' / 'bottom-center'	'top-center'
showIcon	是否显示图标	boolean	true

Message Methods

方法名	说明	参数
close	关闭当前的 Message	-
closeAll	关闭所有 Message	type?: MessageType