Element-React Message Box 彈框

模擬系統(tǒng)的消息提示框而實現的一套模態(tài)對話框組件，用于消息提示、成功提示、錯誤提示、詢問信息。

消息提示

當用戶進行操作時會被觸發(fā)，該對話框中斷用戶操作，直到用戶確認知曉后才可關閉。

調用alert方法即可打開消息提示，它模擬了系統(tǒng)的 alert，無法通過按下 ESC 或點擊框外關閉。此例中接收了兩個參數，message和title。值得一提的是，窗口被關閉后，它默認會返回一個Promise對象便于進行后續(xù)操作的處理。

render() {
  return <Button type="text" onClick={this.onClick.bind(this)}>點擊打開 Message Box</Button>
}


onClick() {
  MessageBox.alert('這是一段內容', '標題名稱');
}

確認消息

提示用戶確認其已經觸發(fā)的動作，并詢問是否進行此操作時會用到此對話框。

調用confirm方法即可打開消息提示，它模擬了系統(tǒng)的 confirm。Message Box 組件也擁有極高的定制性，我們可以傳入options作為第三個參數，它是一個字面量對象。type字段表明消息類型，可以為success，error，info和warning，無效的設置將會被忽略。注意，第二個參數title必須定義為String類型，如果是Object，會被理解為options。在這里我們用了 Promise 來處理后續(xù)響應。

render() {
  return <Button type="text" onClick={this.onClick.bind(this)}>點擊打開 Message Box</Button>
}


onClick() {
  MessageBox.confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
    type: 'warning'
  }).then(() => {
    Message({
      type: 'success',
      message: '刪除成功!'
    });
  }).catch(() => {
    Message({
      type: 'info',
      message: '已取消刪除'
    });
  });
}

提交內容

當用戶進行操作時會被觸發(fā)，中斷用戶操作，提示用戶進行輸入的對話框。

調用prompt方法即可打開消息提示，它模擬了系統(tǒng)的 prompt?？梢杂?code>inputPattern字段自己規(guī)定匹配模式，或者用inputValidator規(guī)定校驗函數，可以返回Boolean或String，Boolean為false或字符串時均表示校驗未通過，String相當于定義了inputErrorMessage字段。此外，可以用inputPlaceholder字段來定義輸入框的占位符。

render() {
  return <Button type="text" onClick={this.onClick.bind(this)}>點擊打開 Message Box</Button>
}


onClick() {
  MessageBox.prompt('請輸入郵箱', '提示', {
    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: '郵箱格式不正確'
  }).then(({ value }) => {
    Message({
      type: 'success',
      message: '你的郵箱是: ' + value
    });
  }).catch(() => {
    Message({
      type: 'info',
      message: '取消輸入'
    });
  });
}

自定義

可自定義配置不同內容。

以上三個方法都是對msgbox方法的再包裝。本例直接調用msgbox方法，使用了showCancelButton字段，用于顯示取消按鈕。另外可使用cancelButtonClass為其添加自定義樣式，使用cancelButtonText來自定義按鈕文本。Confirm 按鈕也具有相同的字段，在文末的字段說明中有完整的字段列表。

render() {
  return <Button type="text" onClick={this.onClick.bind(this)}>點擊打開 Message Box</Button>
}


onClick() {
  MessageBox.msgbox({
    title: '消息',
    message: '這是一段內容, 這是一段內容, 這是一段內容, 這是一段內容, 這是一段內容, 這是一段內容, 這是一段內容',
    showCancelButton: true
  }).then(action => {
    Message({
      type: 'info',
      message: 'action: ' + action
    });
  })
}

單獨引用

單獨引入 MessageBox:

import { MessageBox } from 'element-react';

對應于上述四個全局方法的調用方法依次為：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。

Options