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

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

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

代碼：

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

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

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

點擊確定按鈕效果：

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

MessageBox 彈框

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

over，THX~