ant design vue 图片预览弹窗关闭报错：解决 v-modal:closed 事件在组件销毁后触发的问题
本文将解决 Ant Design Vue 图片预览功能中，关闭弹窗时触发 v-modal:closed 事件，但组件已销毁导致报错的问题。 问题根源在于 v-modal:closed 事件在组件已从 DOM 中移除后仍然被触发。解决方案是在关闭弹窗前，先将组件从 DOM 中移除。
问题描述:
使用 Ant Design Vue 的图片预览组件后，关闭弹窗时会触发 v-modal:closed 事件。然而，如果在事件触发前，组件已被销毁（例如，父组件卸载或其他操作），则会抛出错误，因为事件监听器仍然指向已销毁的组件实例。
立即学习“前端免费学习笔记（深入）”；
解决方案:
修改代码，在关闭弹窗操作前，确保组件已安全地从 DOM 中移除。 以下提供一种修改后的代码示例，核心在于控制组件的显示状态 (_d.show1) 并将其与弹窗关闭逻辑关联：
// 关闭弹窗函数
function handleCancel() {
_d.show1 = false; // 设置显示状态为false，从而移除节点
emit('update:visible', false);
emit('cancel');
}
通过设置 _d.show1 为 false，条件渲染 v-if="_d.show1" 将移除组件，从而避免 v-modal:closed 事件在组件销毁后触发。 这确保了在事件处理程序执行时，组件仍然存在于 DOM 中。 记住调整 _d 对象的定义以适应你的代码结构。 此方法比直接操作 DOM 更安全可靠。
