ElementPlus MessageBox 彈框

MessageBox 彈框

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

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

消息提示

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

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

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

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

確認(rèn)消息

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

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

<template>
  <el-button type="text" @click="open">點(diǎn)擊打開 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)容

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

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

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

<script>
  export default {
    methods: {
      open() {
        this.$prompt('請(qǐng)輸入郵箱', '提示', {
          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)容。

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

<template>
  <el-button type="text" @click="open">點(diǎn)擊打開 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 會(huì)對(duì)新老 VNode 節(jié)點(diǎn)進(jìn)行比對(duì)，然后將根據(jù)比較結(jié)果進(jìn)行最小單位地修改視圖。這也許會(huì)造成彈出層內(nèi)容區(qū)域的組件沒有重新渲染，例如 #8931。當(dāng)這類問題出現(xiàn)時(shí)，解決方案是給 VNode 加上一個(gè)不相同的 key，參考這里。

使用 HTML 片段

message 屬性支持傳入 HTML 片段。

將dangerouslyUseHTMLString屬性設(shè)置為 true，message 就會(huì)被當(dāng)作 HTML 片段處理。

<template>
  <el-button type="text" @click="open">點(diǎn)擊打開 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)站上動(dòng)態(tài)渲染任意 HTML 是非常危險(xiǎn)的，因?yàn)槿菀讓?dǎo)致 XSS 攻擊。因此在 dangerouslyUseHTMLString 打開的情況下，請(qǐng)確保 message 的內(nèi)容是可信的，永遠(yuǎn)不要將用戶提交的內(nèi)容賦值給 message 屬性。

區(qū)分取消與關(guān)閉

有些場景下，點(diǎn)擊取消按鈕與點(diǎn)擊關(guān)閉按鈕有著不同的含義。

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

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

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

居中布局

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

將 center 設(shè)置為 true 即可開啟居中布局

<template>
  <el-button type="text" @click="open">點(diǎn)擊打開 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，它會(huì)為 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)

單獨(dú)引用

如果單獨(dú)引入 MessageBox：

import { ElMessageBox } from 'element-plus'
JS

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

Options