MessageBox 彈框

模擬系統(tǒng)的消息提示框而實現(xiàn)的一套模態(tài)對話框組件，用于消息提示、確認消息和提交內(nèi)容。

從場景上說，MessageBox 的作用是美化系統(tǒng)自帶的 alert、confirm 和 prompt，因此適合展示較為簡單的內(nèi)容。如果需要彈出較為復雜的內(nèi)容，請使用 Dialog。

消息提示

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

調(diào)用$alert方法即可打開消息提示，它模擬了系統(tǒng)的 alert，無法通過按下 ESC 或點擊框外關閉。此例中接收了兩個參數(shù)，message和title。值得一提的是，窗口被關閉后，它默認會返回一個Promise對象便于進行后續(xù)操作的處理。若不確定瀏覽器是否支持Promise，可自行引入第三方 polyfill 或像本例一樣使用回調(diào)進行后續(xù)處理。

<template>
  <el-button type="text" @click="open">點擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$alert('這是一段內(nèi)容', '標題名稱', {
          confirmButtonText: '確定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        })
      },
    },
  }
</script>

確認消息

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

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

<template>
  <el-button type="text" @click="open">點擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '刪除成功!',
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消刪除',
            })
          })
      },
    },
  }
</script>

提交內(nèi)容

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

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

<template>
  <el-button type="text" @click="open">點擊打開 Message Box</el-button>
</template>

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

自定義

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

以上三個方法都是對$msgbox方法的再包裝。本例直接調(diào)用$msgbox方法，使用了showCancelButton字段，用于顯示取消按鈕。另外可使用cancelButtonClass為其添加自定義樣式，使用cancelButtonText來自定義按鈕文本（Confirm 按鈕也具有相同的字段，在文末的字段說明中有完整的字段列表）。此例還使用了beforeClose屬性，它的值是一個方法，會在 MessageBox 的實例關閉前被調(diào)用，同時暫停實例的關閉。它有三個參數(shù)：action、實例本身和done方法。使用它能夠在關閉前對實例進行一些操作，比如為確定按鈕添加loading狀態(tài)等；此時若需要關閉實例，可以調(diào)用done方法（若在beforeClose中沒有調(diào)用done，則實例不會關閉）。

<template>
  <el-button type="text" @click="open">點擊打開 Message Box</el-button>
</template>

<script>
  import { h } from 'vue'

  export default {
    methods: {
      open() {
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '內(nèi)容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode'),
          ]),
          showCancelButton: true,
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '執(zhí)行中...'
              setTimeout(() => {
                done()
                setTimeout(() => {
                  instance.confirmButtonLoading = false
                }, 300)
              }, 3000)
            } else {
              done()
            }
          },
        }).then((action) => {
          this.$message({
            type: 'info',
            message: 'action: ' + action,
          })
        })
      },
    },
  }
</script>

彈出層的內(nèi)容可以是 VNode，所以我們能把一些自定義組件傳入其中。每次彈出層打開后，Vue 會對新老 VNode 節(jié)點進行比對，然后將根據(jù)比較結果進行最小單位地修改視圖。這也許會造成彈出層內(nèi)容區(qū)域的組件沒有重新渲染，例如 #8931。當這類問題出現(xiàn)時，解決方案是給 VNode 加上一個不相同的 key，參考這里。

使用 HTML 片段

message 屬性支持傳入 HTML 片段。

將dangerouslyUseHTMLString屬性設置為 true，message 就會被當作 HTML 片段處理。

<template>
  <el-button type="text" @click="open">點擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$alert('<strong>這是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
          dangerouslyUseHTMLString: true,
        })
      },
    },
  }
</script>

message 屬性雖然支持傳入 HTML 片段，但是在網(wǎng)站上動態(tài)渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊。因此在 dangerouslyUseHTMLString 打開的情況下，請確保 message 的內(nèi)容是可信的，永遠不要將用戶提交的內(nèi)容賦值給 message 屬性。

區(qū)分取消與關閉

有些場景下，點擊取消按鈕與點擊關閉按鈕有著不同的含義。

默認情況下，當用戶觸發(fā)取消（點擊取消按鈕）和觸發(fā)關閉（點擊關閉按鈕或遮罩層、按下 ESC 鍵）時，Promise 的 reject 回調(diào)和callback回調(diào)的參數(shù)均為 'cancel'。如果將distinguishCancelAndClose屬性設置為 true，則上述兩種行為的參數(shù)分別為 'cancel' 和 'close'。

<template>
  <el-button type="text" @click="open">點擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm(
          '檢測到未保存的內(nèi)容，是否在離開頁面前保存修改？',
          '確認信息',
          {
            distinguishCancelAndClose: true,
            confirmButtonText: '保存',
            cancelButtonText: '放棄修改',
          }
        )
          .then(() => {
            this.$message({
              type: 'info',
              message: '保存修改',
            })
          })
          .catch((action) => {
            this.$message({
              type: 'info',
              message:
                action === 'cancel' ? '放棄保存并離開頁面' : '停留在當前頁面',
            })
          })
      },
    },
  }
</script>

居中布局

內(nèi)容支持居中布局

將 center 設置為 true 即可開啟居中布局

<template>
  <el-button type="text" @click="open">點擊打開 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '刪除成功!',
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消刪除',
            })
          })
      },
    },
  }
</script>

全局方法

如果你完整引入了 Element，它會為 app.config.globalProperties 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本頁面中的方式調(diào)用 MessageBox。調(diào)用參數(shù)為：

• $msgbox(options)
• $alert(message, title, options) 或 $alert(message, options)
• $confirm(message, title, options) 或 $confirm(message, options)
• $prompt(message, title, options) 或 $prompt(message, options)

單獨引用

如果單獨引入 MessageBox：

import { ElMessageBox } from 'element-plus'
JS

那么對應于上述四個全局方法的調(diào)用方法依次為：ElMessageBox, ElMessageBox.alert, ElMessageBox.confirm 和 ElMessageBox.prompt，調(diào)用參數(shù)與全局方法相同。

Options