当进行一些操作时,有时需要弹出一些确定信息,一般有两种形式:提示框和确认框。

通常为一个确定动操作,一个取消操作,如下:

this.$confirm(`您确定删除吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定操作
        }).catch(() => {
          // 取消操作
          this.$message({
            type: 'info',
            message: '已取消'
          })
})

页面效果:
在这里插入图片描述

默认情况下,当用户点击取消按钮触发取消和点击关闭按钮或遮罩层、按下 ESC 键触发关闭时,Promisereject 回调和callback 回调的参数均为 ‘cancel’(普通弹出框中的点击取消时的回调参数)。

有时候,两个按钮都需要执行触发动作,如下:

this.$confirm(`审核通过?`, '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
        type: 'warning'
      }).then(() => {
        console.log('确定操作')
      }).catch(action => {
        // 判断是 cancel (自定义的取消) 还是 close (关闭弹窗)
        if (action === 'cancel') {
          noPassAudit({ id: id }).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()
            }
          })
        }
})

页面效果:
在这里插入图片描述

如果将 distinguishCancelAndClose 属性设置为 true,则当用户点击取消按钮触发取消和点击关闭按钮或遮罩层、按下 ESC 键触发关闭时,两种行为的参数分别为 ‘cancel’‘close’,这样就可以在 catch 中拿到回调参数 action 进行判断做什么操作了。

注意:如果没有设置distinguishCancelAndClosetrue,则两种行为都默认为取消。

Logo

前往低代码交流专区

更多推荐