ant design vue 图片预览弹窗关闭报错：解决 v-modal:closed 事件在组件销毁后触发的问题
本文将解决 Ant Design Vue 图片预览功能中，关闭弹窗时触发 v-modal:closed 事件，但组件已销毁导致报错的问题。 问题根源在于 v-modal:closed 事件在组件已从 DOM 中移除后仍然被触发。解决方案是在关闭弹窗前，先将组件从 DOM 中移除。
问题描述:
使用 Ant Design Vue 的图片预览组件后，关闭弹窗时会触发 v-modal:closed 事件。然而，如果在事件触发前，组件已被销毁（例如，父组件卸载或其他操作），则会抛出错误，因为事件监听器仍然指向已销毁的组件实例。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
解决方案:
修改代码，在关闭弹窗操作前，确保组件已安全地从 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 更安全可靠。
