主题
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
Message Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
message | 消息文字 | string | Fuction | VNode | - |
type | 消息类型 | enum | info |
plain | 是否纯色 | boolean | false |
icon | 自定义图标,该属性会覆盖 type 的图标。 | 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 的根元素,默认为 document.body | string | HTMLElement | - |
grouping | 合并内容相同的消息,不支持 VNode 类型的消息 | boolean | false |
repeatNum | 重复次数,类似于 Badge 。当和 grouping 属性一起使用时作为初始数量使用 | number | 1 |
Message Methods
方法名 | 描述 | 类型 |
---|---|---|
close | 关闭当前的 Message | Function |