模擬系統(tǒng)的消息提示框而實(shí)現(xiàn)的一套模態(tài)對(duì)話框組件，用于消息提示、成功提示、錯(cuò)誤提示、詢問(wèn)信息。

消息提示

當(dāng)用戶進(jìn)行操作時(shí)會(huì)被觸發(fā)，該對(duì)話框中斷用戶操作，直到用戶確認(rèn)知曉后才可關(guān)閉。

調(diào)用alert方法即可打開(kāi)消息提示，它模擬了系統(tǒng)的 alert，無(wú)法通過(guò)按下 ESC 或點(diǎn)擊框外關(guān)閉。此例中接收了兩個(gè)參數(shù)，message和title。值得一提的是，窗口被關(guān)閉后，它默認(rèn)會(huì)返回一個(gè)Promise對(duì)象便于進(jìn)行后續(xù)操作的處理。

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


onClick() {
  MessageBox.alert('這是一段內(nèi)容', '標(biāo)題名稱');
}

確認(rèn)消息

提示用戶確認(rèn)其已經(jīng)觸發(fā)的動(dòng)作，并詢問(wèn)是否進(jìn)行此操作時(shí)會(huì)用到此對(duì)話框。

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

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


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

提交內(nèi)容

當(dāng)用戶進(jìn)行操作時(shí)會(huì)被觸發(fā)，中斷用戶操作，提示用戶進(jìn)行輸入的對(duì)話框。

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

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


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

自定義

可自定義配置不同內(nèi)容。

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

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


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

單獨(dú)引用

單獨(dú)引入 MessageBox:

import { MessageBox } from 'element-react';

對(duì)應(yīng)于上述四個(gè)全局方法的調(diào)用方法依次為：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。

Options