vue element插件this.$confirm用法（取消也可以发请求）

最新推荐文章于 2025-03-26 11:04:59 发布

ppandpp

最新推荐文章于 2025-03-26 11:04:59 发布

阅读量7.3w

点赞数 46

文章标签： this.confirm vue element 弹出框

本文链接：https://blog.csdn.net/qq_42970173/article/details/109121226

版权

本文介绍了如何在Vue.js中使用Element UI的弹出框组件实现两个按钮分别请求不同接口的功能。通过设置`distinguishCancelAndClose`属性来区分用户是点击取消还是关闭，并在catch回调中根据行动参数执行相应的接口调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：弹出框的两个按钮都能分别请求接口

最简单的弹出框就是“确定”“取消”，一般用户点击确定才会继续接下来的动作，点击取消则不做任何动作（即不会请求接口）。
如：

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

两个按钮都请求，则：

//任务下线
 offline(data){
     this.$confirm('是否开启保存点？', {
         distinguishCancelAndClose: true,
         confirmButtonText: '是',
         cancelButtonText: '否', //相当于 取消按钮
         type: 'warning'
     }).then(() => {
         api.taskOffline({taskId: data.taskId, isSavepoint: '1'}).then(res => {
             if (res.data.code === "100") {
                 this.$message({type: 'success', message: '下线成功!'})
                 this.getTableData()
             } else {
                 this.$message({type: 'error', message: res.data.msg})
                 this.getTableData()
             }
         })
     }).catch(action => {
     //判断是 cancel (自定义的取消) 还是 close （关闭弹窗）
         if (action === 'cancel'){
             api.taskOffline({taskId: data.taskId, isSavepoint: '0'}).then(res => {
                 if (res.data.code === "100") {
                     this.$message({type: 'success', message: '下线成功!'})
                     this.getTableData()
                 } else {
                     this.$message({type: 'error', message: res.data.msg})
                     this.getTableData()
                 }
             })
         }
     })

默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和callback回调的参数均为 ‘cancel’（普通弹出框中的点击取消时的回调参数）。如果将distinguishCancelAndClose属性设置为 true，则上述两种行为的参数分别为 ‘cancel’ 和 ‘close’。（注意：如果没有设置distinguishCancelAndClose为true，则都默认为取消）

这样就可以在catch中拿到回调参数action进行判断做什么操作了