vue elementUI 之 this.$confirm 的使用
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
,则两种行为都默认为取消。
更多推荐
已为社区贡献24条内容
所有评论(0)