• Message 消息提示
    • 基础用法
    • 不同状态
    • 可关闭
    • 单独引用
    • Options
    • 方法

    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