Ant Design Vue图片预览弹窗关闭时报错：如何解决v-modal:closed事件在组件销毁后触发的问题？-js教程-PHP中文网

Ant Design Vue图片预览弹窗关闭时报错：如何解决v-modal:closed事件在组件销毁后触发的问题？

聖光之護

发布： 2025-02-25 13:16:40

原创

844人浏览过

ant design vue 图片预览弹窗关闭报错：解决 v-modal:closed 事件在组件销毁后触发的问题

本文将解决 Ant Design Vue 图片预览功能中，关闭弹窗时触发 v-modal:closed 事件，但组件已销毁导致报错的问题。问题根源在于 v-modal:closed 事件在组件已从 DOM 中移除后仍然被触发。解决方案是在关闭弹窗前，先将组件从 DOM 中移除。

Ant Design Vue图片预览弹窗关闭时报错：如何解决v-modal:closed事件在组件销毁后触发的问题？

问题描述:

使用 Ant Design Vue 的图片预览组件后，关闭弹窗时会触发 v-modal:closed 事件。然而，如果在事件触发前，组件已被销毁（例如，父组件卸载或其他操作），则会抛出错误，因为事件监听器仍然指向已销毁的组件实例。

立即学习“前端免费学习笔记（深入）”；

一览AI绘图

一览AI绘图是一览科技推出的AIGC作图工具，用AI灵感助力，轻松创作高品质图片

查看详情

解决方案:

修改代码，在关闭弹窗操作前，确保组件已安全地从 DOM 中移除。以下提供一种修改后的代码示例，核心在于控制组件的显示状态 (_d.show1) 并将其与弹窗关闭逻辑关联：

<code class="vue"><teleport :disabled="appendtobody">
  <div
    :class="{ show: _d.show3, 'is-drag': props.draggable }"
    :style="{
      display: _d.show2 ? 'block' : 'none',
      zIndex: _d.zindex,
    }"
    class="m-dialog-wrapper"
    ref="mdialogwrapperref"
    v-if="_d.show1"
  >
    <div class="m-dialog-modal">
      <div class="m-dialog-cell">
        <div
          :style="{
            width: _d.width,
            maxWidth: _d.maxwidth,
            transform: `translate(${_d.drag.resultx}px, ${_d.drag.resulty}px)`,
          }"
          class="m-dialog-container"
        >
          <transition name="dialog-fade">
            <div class="m-dialog" ref="mdialogref">
              <div class="m-dialog-title">
                <template v-if="title">{{ title }}</template>
                <slot name="title" v-else></slot>
                <div class="m-dialog-close">
                  <svg
                    aria-hidden="true"
                    class=""
                    data-icon="close"
                    fill="currentColor"
                    focusable="false"
                    height="1em"
                    viewBox="64 64 896 896"
                    width="1em"
                  >
                    <path
                      d="m563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7l511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7h203c-6.8 0-10.5 7.9-6.1 13.1l459.4 512 196.9 824.9a7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1l563.8 512z"
                    ></path>
                  </svg>
                </div>
              </div>
              <div :style="bodystyle" class="m-dialog-content">
                <slot></slot>
              </div>
              <div class="m-dialog-footer">
                {{ canceltext }}
                {{ oktext }}
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</teleport></code>

登录后复制

<code class="javascript">// 关闭弹窗函数
function handleCancel() {
  _d.show1 = false; // 设置显示状态为false，从而移除节点
  emit('update:visible', false);
  emit('cancel');
}</code>

登录后复制

通过设置 _d.show1 为 false，条件渲染 v-if="_d.show1" 将移除组件，从而避免 v-modal:closed 事件在组件销毁后触发。这确保了在事件处理程序执行时，组件仍然存在于 DOM 中。记住调整 _d 对象的定义以适应你的代码结构。此方法比直接操作 DOM 更安全可靠。

以上就是Ant Design Vue图片预览弹窗关闭时报错：如何解决v-modal:closed事件在组件销毁后触发的问题？的详细内容，更多请关注php中文网其它相关文章！