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

最新推荐文章于 2024-11-13 16:56:24 发布

原创最新推荐文章于 2024-11-13 16:56:24 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了在Vue.js应用中使用$a-button组件触发$confirm弹窗时，回调函数中this指向不正确的问题。当在onOk和onCancel回调中尝试访问组件方法或数据时，由于上下文丢失，会导致功能失效。为了解决这个问题，文章提出将回调函数改为箭头函数，以保持正确的this指向。示例代码展示了如何在deleteItem方法中正确实现弹窗确认删除功能，确保回调内this指向组件实例，从而能够正常调用$messsage和模拟删除接口。

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

<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('你已经取消此操作！')
            }
          })
        },