vue $confirm
模态框如果想执行取消和关闭后的逻辑,需要在$confirm
的Promise
后跟.catch()
方法。如果没有.catch()
,当点击取消或关闭操作时控制台就会出现Uncaught (in promise) close
和Uncaught (in promise) cancel
.then中执行确定逻辑 .catch 中执行取消和关闭逻辑
代码实现
handle() {
this.$confirm("确定此次修改操作", "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
closeOnClickModal: false
}).then((res) => {
//确定逻辑 点击确定 res='confirm'
...
}).catch((error) => {
//取消关闭逻辑 点击取消 error='cancel' 关闭 error='error'
...
})
}
async await 写法
async handle() {
const confirmResult = await this.$confirm("确定此次修改操作", "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
closeOnClickModal: false
}).then((res)=>res).catch((error) => error) // .then() 可以不带
if (confirmResult === 'confirm') {
// await 耗时操作方法
}
if (confirmResult === 'cancel') {
// 取消
}
if (confirmResult === 'cancel') {
// 关闭
}
...
}