记ElementUI内置的$confirm确认消息弹框方法

在项目中遇到了一个this.$confirm但在main.js的vue.prototype实例挂载上却没找到该对应的方法。查阅后发现是ElementUI自带的类似$message的api，非常方便好用~~~在此简单记录一下

---

例如某个页面的table带有操作按钮，可以删除或废弃某一条数据，那么我们可不能在点击删除按钮的一瞬间就把该条数据给彻底删掉了（万一是用户点错了咋办？），而该弹出一条确认信息供操作者再次确认无误后再执行：

若是项目中的每个table都自己手动写一个toast弹窗就太麻烦了，风格也容易不统一。那么就像消息提示的$message一样，采用ElementUI内置的$confirm确认消息api就好了：

代码：

<!-- 点击后需要确认的按钮 -->
<el-button type="primary" @click="delectButton(params.row)" size="mini">废弃</el-button>

    // 废弃按钮事件
    delectButton(row) {
      // 引用确认消息弹窗api
      this.$confirm(
        '确定要废弃XXX节点的XXX吗？确定后会删除该记录。', // 第一个参数为弹窗消息内容
        '提示', // 第二个参数为弹窗左上角标题title
        // 第三个参数为弹窗项的options，应该为object对象
        { 
          confirmButtonText: '确定',  // 确认按钮的文本，可省略，默认为确定
          cancelButtonText: '取消',  // 取消按钮的文本，可省略，默认为取消
          type: 'warning' // 弹窗的消息类型，比如为warning时弹窗左边图标为'!'感叹号，为success时图标为'√'的勾。
        }
      )
      	// then中填写点击确认按钮后执行的事件，例如执行删除该条数据的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(); // 删除成功后刷新页面数据
            });
        })
        // catch中填写点击取消按钮后执行的事件，例如消息提示“已取消删除”
        .catch(() => {
          this.$message.info(this.$t("lang.Deletecancelled")); // 使用i18n国际化表示的“已取消删除”
        });

点击取消按钮效果（我们项目自己封装的$message方法，和ElementUI的样式不太一样）：

点击确定按钮效果：

---

除此之外，ElementUI还提供了许多弹窗校验api，都在这个MessageBox 弹框的文档里：

MessageBox 弹框

包括提示填入内容等等，甚至可以自定义配置，真心十分好用

---

over，THX~