Element-React Message 消息提示

2020-10-17 11:09 更新

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

基础用法

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

Message 在配置上与 Notification 非常类似,所以部分 options 在此不做详尽解释,文末有 options 列表,可以结合 Notification 的文档理解它们。

open() {
  Message('这是一条消息提示');
}


render() {
  return <Button plain={true} onClick={this.open.bind(this)}>打开消息提示</Button>
}

不同状态

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

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

open() {
  Message({
    message: '恭喜你,这是一条成功消息',
    type: 'success'
  });
}


open2() {
  Message({
    message: '警告哦,这是一条警告消息',
    type: 'warning'
  });
}


open3() {
  Message('这是一条消息提示');
}


open4() {
  Message.error('错了哦,这是一条错误消息');
}


render() {
  return (
    <div>
      <Button plain={true} onClick={this.open.bind(this)}>成功</Button>
      <Button plain={true} onClick={this.open2.bind(this)}>警告</Button>
      <Button plain={true} onClick={this.open3.bind(this)}>消息</Button>
      <Button plain={true} onClick={this.open4.bind(this)}>错误</Button>
    </div>
  )
}

可关闭

可以添加关闭按钮。

默认的 Message 是不可以被人工关闭的,如果需要可手动关闭的 Message,可以使用showClose字段。此外,和 Notification 一样,Message 拥有可控的duration,设置0为不会被自动关闭,默认为 3000 毫秒。

open5() {
  Message({
    showClose: true,
    message: '恭喜你,这是一条成功消息',
    type: 'success'
  });
}


open6() {
  Message({
    showClose: true,
    message: '警告哦,这是一条警告消息',
    type: 'warning'
  });
}


open7() {
  Message({
    showClose: true,
    message: '这是一条消息提示',
    type: 'info'
  });
}


open8() {
  Message({
    showClose: true,
    message: '错了哦,这是一条错误消息',
    type: 'error'
  });
}


render() {
  return (
    <div>
      <Button plain={true} onClick={this.open5.bind(this)}>成功</Button>
      <Button plain={true} onClick={this.open6.bind(this)}>警告</Button>
      <Button plain={true} onClick={this.open7.bind(this)}>消息</Button>
      <Button plain={true} onClick={this.open8.bind(this)}>错误</Button>
    </div>
  )
}

单独引用

单独引入 Message

import { Message } from 'element-react';

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

Options

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

方法

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

方法名 说明
close 关闭当前的 Message
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号