el-dialog 的关闭事件执行两次

最新推荐文章于 2025-04-28 18:53:07 发布

原创最新推荐文章于 2025-04-28 18:53:07 发布 · 6.5k 阅读

6 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

9 篇文章

订阅专栏

这篇博客探讨了一个关于El Dialog组件的问题，即点击关闭按钮时，handleDialogClosed事件被触发两次，而点击右上角X仅触发一次。原因是关闭按钮同时触发了自身的点击事件和弹框的关闭事件。解决方案是将两个事件分开绑定，以避免重复执行。

<el-dialog
          class="dataObject"
          :title="$t('add.B') + $t('dataObject.C')"
          :visible.sync="viewing"
          :close-on-click-modal="false"
          width="40.5rem"
          @open="load"
          @closed="handleDialogClosed">
 <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click.native="handleDialogClosed">关闭</el-button>
  </span>
</el-dialog>

问题：
当点击弹框的关闭事件时 handleDialogClosed会被执行两遍，但是点击弹框右上角的 X 时却只会执行一遍。两处操作都只是绑定了同一个操作事件，为什么一个会执行两遍一个却只会执行一遍

原因：
因为弹框下方的button事件关闭弹框的时候会自动执行 @closed
事件。所以关闭按钮执行了一遍，弹框本身的close事件又执行了一遍，一共执行了两边。
但是弹框右上角的X是弹框本身的关闭事件故只执行一遍。

解决方案：

将关闭按钮的事件和弹框右上角的X事件分开绑定的方法即可。