Element-React Message 消息提示

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

基礎(chǔ)用法

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

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

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


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

不同狀態(tài)

用來顯示「成功、警告、消息、錯誤」類的操作反饋。

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

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>
  )
}

可關(guān)閉

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

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

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

Options

方法

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