实际中有时会使用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