ElMessageBox点击取消或点击关闭时并不是返回的‘concel/close‘

实际中有时会使用ELMessageBox进行操作的二次确认,点击确认执行怎么样的操作,点击取消/关闭进行什么样的操作
发现这一问题时的情况,
我需要在表单校验成功后进行二次确认来拿到一个布尔值去判断是否进行确认后的操作,这里我使用的ElMessageBox.confirm来进行二次校验

let flag=false
await this.$refs['formRef'].validate(async (valid)=>{
   if(valid){
      if(***){
        const res=await ElMessageBox.confirm('是否确认提交?', '提示',
           {
             confirmButtonText: '确认',
             cancelButtonText: '取消',
             type: 'warning',
           }
        )
        if(res==='confirm'){
          flag=true
        }else{
		  flag=false
		}
      }else{
         flag=true
      }
   }else{
      this.$message.error('请完善表单信息')
   }
 })
 return flag

当我点击取消/关闭确认框时,他提示了’请完善表单信息’

搜索之后得知,ElMessage.confirm点击确认时返回的是confirm,但如果是点击取消/关闭时,这个Promise是走了reject,因为他是相当于抛出了一个错误,因此在校验中触发了校验失败,从而提示“请完善表单信息”

如果想要实现:确认执行操作,取消/关闭执行操作,就需要在ElMessage.Box的外部使用try{}catch(){}包裹一下,去捕获一下报错,在catch中去写非确认操作,例如:

let flag=false
await this.$refs['formRef'].validate(async (valid)=>{
   if(valid){
      if(***){
      	try{
			const res=await ElMessageBox.confirm('是否确认提交?', '提示',
           		{
             		confirmButtonText: '确认',
             		cancelButtonText: '取消',
             		type: 'warning',
           		}
        	)
        	if(res==='confirm'){
          		flag=true
        	}
		}catch(error){
			flag=false
		}
      }else{
         flag=true
      }
   }else{
      this.$message.error('请完善表单信息')
   }
 })
 return flag
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值