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

时间：2022-12-11 00:30:01 thx03微量程动态扭矩传感器

我在项目中遇到了一个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 messgeMethod = 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~

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

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

相关文章