Ant Design Vue全局对话确认框(confirm)的回调不触发
更新时间:2023年07月28日 15:54:35 作者:贪吃蛇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为点击‘’取消‘’触发的事件
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue中router-view和component :is的区别解析
这篇文章主要介绍了Vue中router-view和component :is的区别解析,router-view用法直接填写跳转路由,路由组件会渲染<router-view></router-view>标签,本文给大家介绍的非常详细,需要的朋友可以参考下2023-10-10
vue-quill-editor富文本编辑器上传视频功能详解
需求需要实现富文本的功能,同时富文本中还可以上传视频和图片,选来选去最后决定了用这个富文本编辑器,下面这篇文章主要给大家介绍了关于vue-quill-editor富文本编辑器上传视频功能的相关资料,需要的朋友可以参考下2023-05-05
详解vue之自行实现派发与广播(dispatch与broadcast)
这篇文章主要介绍了详解vue之自行实现派发与广播(dispatch与broadcast),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-01-01


最新评论