Ant Design Vue全局对话确认框(confirm)的回调不触发

糜思莲

Ant Design Vue全局对话确认框的回调不触发

我们先来看下官网给的案例和代码。

1. <template>
   
2.   <a-button @click="showConfirm">
   
3.     Confirm
   
4.   </a-button>
   
5. </template>
   
6. <script>
   
7. export default {
   
8.   methods: {
   
9.     showConfirm() {
   
10.       this.$confirm({
    
11.         title: 'Do you want to delete these items?',
    
12.         content: 'When clicked the OK button, this dialog will be closed after 1 second',
    
13.         onOk() {
    
14.           return new Promise((resolve, reject) => {
    
15.             setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
    
16.           }).catch(() => console.log('Oops errors!'));
    
17.         },
    
18.         onCancel() {},
    
19.       });
    
20.     },
    
21.   },
    
22. };
    
23. </script>

复制代码

官网给了两个回调一个是onOk 点击确认的回调，还有一个是onCancel 是点击取消的回调。
但是我们使用了 就会发现里面的一些使用到this指向不对。导致里面需要用到this的功能都失效。

解决办法

只需要把这两个回调（onOk、onCancel）改成箭头函数即可。
代码如下：

1. // 删除
   
2.         deleteItem (row) {
   
3.           this.$confirm({
   
4.             title: '提示',
   
5.             content: '您是否确认删除该组织？',
   
6.             // 点击确认触发的回调
   
7.             onOk: () => {
   
8.             //  这里模拟请求删除的接口
   
9.             setTimeout(() => this.$message.success('删除成功！'), 1000)
   
10.             },
    
11.             // 点取消触发的回调
    
12.             onCancel: () => {
    
13.               this.$message.success('你已经取消此操作！')
    
14.             }
    
15.           })
    
16.         },

复制代码

ant design confirm确认框的应用

用法如下：

1. this.$confirm({
   
2.             // iconClass: 'el-icon-question', //自定义图标样式
   
3.             title: '提示',
   
4.             content: '账户名称与企业名称不一致，请确认是否提交?',
   
5.             confirmButtonText: '确认', //确认按钮文字更换
   
6.             cancelButtonText: '取消', //取消按钮文字更换
   
7.             showClose: true, //是否显示右上角关闭按钮
   
8.             type: 'warning', //提示类型  success/info/warning/error
   
9.             onOk:() => {
   
10.             this.doSave(_this.mdl)
    
11.             .then((res) => {
    
12.               if (res.success) {
    
13.                 _this.$message.success('保存成功')
    
14.                 _this.$emit('ok')
    
15.               } else {
    
16.                 _this.$message.error(res.message)
    
17.               }
    
18.             })
    
19.             .catch((err) => {
    
20.               console.error(err)
    
21.             })
    
22.             .finally(() => {
    
23.               _this.confirmLoading = false
    
24.               _this.close()
    
25.             })     
    
26.             onCancel() {
    
27.                 },
    
28.             }
    
29.           })

复制代码

需要注意的是onOk中调用vue的方法doSave，此时需要用箭头函数写法，不然this指向出现问题，调不到doSave。

• onOk为点击‘’确认‘’触发的事件
  
• onCancel为点击‘’取消‘’触发的事件
  

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持晓枫资讯。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

小鱼吐泡泡1

顶顶更健康！！！

言其雨

感谢楼主分享。

夏夏0021

感谢楼主，顶。