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

LangForOne

已于 2022-06-23 17:21:50 修改

阅读量6.2k

点赞数

分类专栏：经验分享 vue 文章标签： elementui vue.js 前端

于 2022-06-23 17:19:37 首次发布

本文链接：https://blog.csdn.net/vvv3171071/article/details/125430070

版权

经验分享同时被 2 个专栏收录

47 篇文章

订阅专栏

vue

41 篇文章

订阅专栏

在项目中遇到了一个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国际化表示的“已取消删除”
        });