Element-React Message 消息提示

常用于主動(dòng)操作后的反饋提示。與 Notification 的區(qū)別是后者更多用于系統(tǒng)級(jí)通知的被動(dòng)提醒。

基礎(chǔ)用法

從頂部出現(xiàn)，3 秒后自動(dòng)消失。

Message 在配置上與 Notification 非常類似，所以部分 options 在此不做詳盡解釋，文末有 options 列表，可以結(jié)合 Notification 的文檔理解它們。

open() {
  Message('這是一條消息提示');
}


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

不同狀態(tài)

用來(lái)顯示「成功、警告、消息、錯(cuò)誤」類的操作反饋。

當(dāng)需要自定義更多屬性時(shí)，Message 也可以接收一個(gè)對(duì)象為參數(shù)。比如，設(shè)置type字段可以定義不同的狀態(tài)，默認(rèn)為info。此時(shí)正文內(nèi)容以message的值傳入。同時(shí)，我們也為 Message 的各種 type 注冊(cè)了方法，可以在不傳入type字段的情況下像open4那樣直接調(diào)用。

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


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


open3() {
  Message('這是一條消息提示');
}


open4() {
  Message.error('錯(cuò)了哦，這是一條錯(cuò)誤消息');
}


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)}>錯(cuò)誤</Button>
    </div>
  )
}

可關(guān)閉

可以添加關(guān)閉按鈕。

默認(rèn)的 Message 是不可以被人工關(guān)閉的，如果需要可手動(dòng)關(guān)閉的 Message，可以使用showClose字段。此外，和 Notification 一樣，Message 擁有可控的duration，設(shè)置0為不會(huì)被自動(dòng)關(guān)閉，默認(rèn)為 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: '錯(cuò)了哦，這是一條錯(cuò)誤消息',
    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)}>錯(cuò)誤</Button>
    </div>
  )
}

單獨(dú)引用

單獨(dú)引入 Message：

import { Message } from 'element-react';

此時(shí)調(diào)用方法為 Message(options)。我們也為每個(gè) type 定義了各自的方法，如 Message.success(options)。

Options

方法

調(diào)用 Message 或 this.$message 會(huì)返回當(dāng)前 Message 的實(shí)例。如果需要手動(dòng)關(guān)閉實(shí)例，可以調(diào)用它的 close 方法。