在項(xiàng)目中遇到了一個(gè)this.$confirm但在main.js的vue.prototype實(shí)例掛載上卻沒找到該對(duì)應(yīng)的方法。查閱后發(fā)現(xiàn)是ElementUI自帶的類似$message的api，非常方便好用~~~在此簡(jiǎn)單記錄一下

例如某個(gè)頁(yè)面的table帶有操作按鈕，可以刪除或廢棄某一條數(shù)據(jù)，那么我們可不能在點(diǎn)擊刪除按鈕的一瞬間就把該條數(shù)據(jù)給徹底刪掉了（萬一是用戶點(diǎn)錯(cuò)了咋辦？），而該彈出一條確認(rèn)信息供操作者再次確認(rèn)無誤后再執(zhí)行：

若是項(xiàng)目中的每個(gè)table都自己手動(dòng)寫一個(gè)toast彈窗就太麻煩了，風(fēng)格也容易不統(tǒng)一。那么就像消息提示的$message一樣，采用ElementUI內(nèi)置的$confirm確認(rèn)消息api就好了：

代碼：

<!-- 點(diǎn)擊后需要確認(rèn)的按鈕 -->
<el-button type="primary" @click="delectButton(params.row)" size="mini">廢棄</el-button>

    // 廢棄按鈕事件
    delectButton(row) {
      // 引用確認(rèn)消息彈窗api
      this.$confirm(
        '確定要廢棄XXX節(jié)點(diǎn)的XXX嗎？確定后會(huì)刪除該記錄。', // 第一個(gè)參數(shù)為彈窗消息內(nèi)容
        '提示', // 第二個(gè)參數(shù)為彈窗左上角標(biāo)題title
        // 第三個(gè)參數(shù)為彈窗項(xiàng)的options，應(yīng)該為object對(duì)象
        { 
          confirmButtonText: '確定',  // 確認(rèn)按鈕的文本，可省略，默認(rèn)為確定
          cancelButtonText: '取消',  // 取消按鈕的文本，可省略，默認(rèn)為取消
          type: 'warning' // 彈窗的消息類型，比如為warning時(shí)彈窗左邊圖標(biāo)為'!'感嘆號(hào)，為success時(shí)圖標(biāo)為'√'的勾。
        }
      )
      	// then中填寫點(diǎn)擊確認(rèn)按鈕后執(zhí)行的事件，例如執(zhí)行刪除該條數(shù)據(jù)的delect請(qǐng)求 
        .then(() => {
          axios.delete("xxxx", {row})
            .then((res) => {
              let messageMethod = res.data.code === 200 ? "success" : "error";
              this.$message[messageMethod](res.data.message); // delect請(qǐng)求返回的消息提示
              this.search(); // 刪除成功后刷新頁(yè)面數(shù)據(jù)
            });
        })
        // catch中填寫點(diǎn)擊取消按鈕后執(zhí)行的事件，例如消息提示“已取消刪除”
        .catch(() => {
          this.$message.info(this.$t("lang.Deletecancelled")); // 使用i18n國(guó)際化表示的“已取消刪除”
        });

點(diǎn)擊取消按鈕效果（我們項(xiàng)目自己封裝的$message方法，和ElementUI的樣式不太一樣）：

點(diǎn)擊確定按鈕效果：

除此之外，ElementUI還提供了許多彈窗校驗(yàn)api，都在這個(gè)MessageBox 彈框的文檔里：

MessageBox 彈框

包括提示填入內(nèi)容等等，甚至可以自定義配置，真心十分好用

over，THX~