Message 消息提示

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

基础用法

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

Message 消息提示 - 图1

不同状态

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

Message 消息提示 - 图2

可关闭

可以添加关闭按钮。

Message 消息提示 - 图3

单独引用

单独引入 Message

  1. import { Message } from 'element-react';

此时调用方法为 Message(options)。我们也为每个 type 定义了各自的方法,如 Message.success(options)

Options

参数说明类型可选值默认值
message消息文字string/ReactElement
type主题stringsuccess/warning/info/errorinfo
iconClass自定义图标的类名,会覆盖 typestring
customClass自定义类名string
duration显示时间, 毫秒。设为 0 则不会自动关闭number3000
showClose是否显示关闭按钮booleanfalse
onClose关闭时的回调函数, 参数为被关闭的 message 实例function

方法

调用 Messagethis.$message 会返回当前 Message 的实例。如果需要手动关闭实例,可以调用它的 close 方法。

方法名说明
close关闭当前的 Message