vue elementUI 之 this.$confirm 的使用

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

通常为一个确定动操作，一个取消操作，如下：

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

页面效果：

默认情况下，当用户点击取消按钮触发取消和点击关闭按钮或遮罩层、按下 ESC 键触发关闭时，Promise 的 reject 回调和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 进行判断做什么操作了。

注意：如果没有设置distinguishCancelAndClose为true，则两种行为都默认为取消。