Skip to content

Message 消息提示 ​

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

基础用法 ​

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

不同状态 ​

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

当需要自定义更多属性时,Message 也可以接收一个对象为参数。 比如,设置 type 字段可以定义不同的状态,默认为info。 此时正文内容以 message 的值传入。 同时,我们也为 Message 的各种 type 注册了方法,可以在不传入 type 字段的情况下像 open4 那样直接调用。

Plain ​

设置 plain 为 plain 背景。

可关闭的消息提示 ​

可以添加关闭按钮。

默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能,你可以把 showClose 设置为 true 此外,和 Notification 一样,Message 拥有可控的 duration, 默认的关闭时间为 3000 毫秒,当把这个属性的值设置为0便表示该消息不会被自动关闭。

文字居中 ​

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

使用 HTML 片段作为正文内容 ​

message 还支持使用 HTML 字符串作为正文内容。

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

WARNING

message 属性虽然支持传入 HTML 片段,但是在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。 因此在 dangerouslyUseHTMLString 打开的情况下,请确保 message 的内容是可信的,永远不要将用户提交的内容赋值给 message 属性。

分组消息合并 ​

合并相同内容的消息。

设置 grouping 为 true,内容相同的 message 将被合并。

API ​

Props ​

参数名描述类型默认值
message消息文字string | Fuction | VNode-
type消息类型enum'info'
plain是否纯色booleanfalse
icon自定义图标,该属性会覆盖 type 的图标。string | Component-
dangerouslyUseHTMLString是否将 message 属性作为 HTML 片段处理booleanfalse
customClass自定义类名string-
duration显示时间,单位为毫秒。 设为 0 则不会自动关闭number3000
showClose是否显示关闭按钮booleanfalse
center文字是否居中booleanfalse
onClose关闭时的回调函数, 参数为被关闭的 message 实例Function-
offsetMessage 距离窗口顶部的偏移量number16
appendTo设置 message 的根元素,默认为 document.bodystring | HTMLElement-
grouping合并内容相同的消息,不支持 VNode 类型的消息booleanfalse
repeatNum重复次数,类似于 Badge 。当和 grouping 属性一起使用时作为初始数量使用number1
closeOnClick 1.2.5是否可以通过点击消息框关闭 Messagebooleanfalse

Methods ​

方法名描述类型
close关闭当前的 MessageFunction