Ant Design Vue全局对话确认框(confirm)的回调不触发
作者：贪吃蛇2120
这篇文章主要介绍了Ant Design Vue全局对话确认框(confirm)的回调不触发问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Ant Design Vue全局对话确认框的回调不触发
我们先来看下官网给的案例和代码。
<template>
<a-button @click="showConfirm">
Confirm
</a-button>
</template>
<script>
export default {
methods: {
showConfirm() {
this.$confirm({
title: 'Do you want to delete these items?',
content: 'When clicked the OK button, this dialog will be closed after 1 second',
onOk() {
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
}).catch(() => console.log('Oops errors!'));
},
onCancel() {},
});
},
},
};
</script>官网给了两个回调一个是onOk 点击确认的回调，还有一个是onCancel 是点击取消的回调。
但是我们使用了 就会发现里面的一些使用到this指向不对。导致里面需要用到this的功能都失效。
解决办法
只需要把这两个回调（onOk、onCancel）改成箭头函数即可。
代码如下：
// 删除
deleteItem (row) {
this.$confirm({
title: '提示',
content: '您是否确认删除该组织？',
// 点击确认触发的回调
onOk: () => {
// 这里模拟请求删除的接口
setTimeout(() => this.$message.success('删除成功！'), 1000)
},
// 点取消触发的回调
onCancel: () => {
this.$message.success('你已经取消此操作！')
}
})
},ant design confirm确认框的应用
用法如下：
this.$confirm({
// iconClass: 'el-icon-question', //自定义图标样式
title: '提示',
content: '账户名称与企业名称不一致，请确认是否提交?',
confirmButtonText: '确认', //确认按钮文字更换
cancelButtonText: '取消', //取消按钮文字更换
showClose: true, //是否显示右上角关闭按钮
type: 'warning', //提示类型 success/info/warning/error
onOk:() => {
this.doSave(_this.mdl)
.then((res) => {
if (res.success) {
_this.$message.success('保存成功')
_this.$emit('ok')
} else {
_this.$message.error(res.message)
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
_this.confirmLoading = false
_this.close()
})
onCancel() {
},
}
})需要注意的是onOk中调用vue的方法doSave，此时需要用箭头函数写法，不然this指向出现问题，调不到doSave。
- onOk为点击‘’确认‘’触发的事件
- onCancel为点击‘’取消‘’触发的事件
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。