Element-React Notification 通知

懸浮出現(xiàn)在頁面右上角，顯示全局的通知提醒消息。

基本用法

適用性廣泛的通知欄

Notification 組件提供通知功能，Element 注冊了Notification方法，接收一個options字面量參數(shù)，在最簡單的情況下，你可以設(shè)置title字段和message字段，用于設(shè)置通知的標題和正文。默認情況下，經(jīng)過一段時間后 Notification 組件會自動關(guān)閉，但是通過設(shè)置duration，可以控制關(guān)閉的時間間隔，特別的是，如果設(shè)置為0，則不會自動關(guān)閉。注意：duration接收一個Number，單位為毫秒，默認為4500。

render() {
  return (
    <div>
      <Button plain={true} onClick={this.open.bind(this)}>可自動關(guān)閉</Button>
      <Button plain={true} onClick={this.open2.bind(this)}>不會自動關(guān)閉</Button>
    </div>
  )
}


open() {
  Notification({
    title: '標題名稱',
    message: '這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案'
  });
}


open2() {
  Notification({
    title: '提示',
    message: '這是一條不會自動關(guān)閉的消息',
    duration: 0
  });
}

帶有傾向性

帶有 icon，常用來顯示「成功、警告、消息、錯誤」類的系統(tǒng)消息

Element 為 Notification 組件準備了四種通知類型：success, warning, info, error。通過type字段來設(shè)置，除此以外的值將被忽略。同時，我們也為 Notification 的各種 type 注冊了方法，可以在不傳入type字段的情況下像open5和open6那樣直接調(diào)用。

render() {
  return (
    <div>
      <Button plain={true} onClick={this.open3.bind(this)}>成功</Button>
      <Button plain={true} onClick={this.open4.bind(this)}>警告</Button>
      <Button plain={true} onClick={this.open5.bind(this)}>消息</Button>
      <Button plain={true} onClick={this.open6.bind(this)}>錯誤</Button>
    </div>
  )
}


open3() {
  Notification({
    title: '成功',
    message: '這是一條成功的提示消息',
    type: 'success'
  });
}


open4() {
  Notification({
    title: '警告',
    message: '這是一條警告的提示消息',
    type: 'warning'
  });
}


open5() {
  Notification.info({
    title: '消息',
    message: '這是一條消息的提示消息'
  });
}


open6() {
  Notification.error({
    title: '錯誤',
    message: '這是一條錯誤的提示消息'
  });
}

帶有偏移

讓 Notification 偏移一些位置

Notification 提供設(shè)置偏移量的功能，通過設(shè)置 offset 字段，可以使彈出的消息距屏幕頂部偏移一段距離。注意在同一時刻，所有的 Notification 實例應(yīng)當具有一個相同的偏移量。

render() {
  return (
    <Button plain={true} onClick={this.open.bind(this)}>偏移的通知</Button>
  )
}


open() {
  Notification({
    title: '成功',
    message: '這是一條成功的提示消息',
    offset: 100
  });
}

單獨引用

單獨引入 Notification：

import { Notification } from 'element-react';

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

參數(shù)

方法

調(diào)用 Notification 會返回當前 Notification 的實例。如果需要手動關(guān)閉實例，可以調(diào)用它的 close 方法。