VUE自定义弹窗，使用ant-design-vue图片预览功能后，关闭弹窗时为什么会报错?-灵析社区

我自己写了一个弹窗组件，在一种情况下会报错，但是找不到报错原因。 打开弹窗后，在弹窗中使用ant-design-vue的图片预览功能，然后关闭弹窗时会报错。  弹窗代码如下： resetFields()"> --> {{title}} {{cancelText}} {{okText}} import { ref, reactive, watch, onBeforeMount, onBeforeUnmount } from 'vue' const mDialogWrapperRef = ref(); const mDialogRef = ref(); const emit = defineEmits(['update:visible', 'ok', 'cancel', 'closed']) const props = defineProps({ visible: { type: Boolean, default: false }, width: { type: String, default: '' }, maxWidth: { type: String, default: '' }, title: { type: String, default: '' }, footer: { type: Boolean, default: true }, showOk: { type: Boolean, default: true }, showCancel: { type: Boolean, default: true }, okText: { type: String, default: '确认修改' }, cancelText: { type: String, default: '暂不修改' }, // 确认按钮-加载中 okLoading: { type: Boolean, default: false }, // 点击蒙层是否允许关闭 maskClosable: { type: Boolean, default: true }, // 内容样式 bodyStyle: { type: Object, default: () => ({}) }, // 层级 - 如果设置了就是固定层级，如果不设置从最多层级1000开始往上加 zIndex: { type: Number, default: 0 }, // 是否加到body节点下 appendToBody: { type: Boolean, default: true }, // 当关闭 Dialog 时，销毁其中的元素 destroyOnClose: { type: Boolean, default: true }, // 为 Dialog 启用可拖拽功能 draggable: { type: Boolean, default: false } }) const _d = reactive({ show1: false, // 控制v-if show2: false, // 控制display show3: false, // 控制动画 zIndex: 1000, // 最低层级 width: !props.width && !props.maxWidth ? '400px' : props.width, // 宽度 maxWidth: props.maxWidth, // 最大宽度 // 拖动参数 drag: { // 是否点下 isDown: false, // 整个页面你最大宽高 pageWidth: 0, pageHeight: 0, // 弹窗宽高 dialogWidth: 0, dialogHeight: 0, // 左右最大移动距离 minX: 0, maxX: 0, minY: 0, maxY: 0, // 移动结果 resultX: 0, resultY: 0, // 鼠标点下是历史移动距离 startX: 0, startY: 0, // 鼠标点下时相对于page的位置 downX: 0, downY: 0, // 鼠标移动位置 moveX: 0, moveY: 0, } }) watch(() => props.visible, (newVal) => { setVisible(); }) onBeforeMount(() => { setVisible(); // 绑定鼠标事件 window.addEventListener('mousemove', dragMove); window.addEventListener('mouseup', dragUp); }) onBeforeUnmount(() => { // 如果appendToBody属性为true, 移除掉插入到body上面的弹框组件，别说这一点我都忘了，严谨 let $el = mDialogWrapperRef.value; if (props.appendToBody && $el && $el.parentNode) { $el.parentNode.removeChild($el); } // 解绑鼠标事件 window.removeEventListener('mousemove', dragMove); window.removeEventListener('mouseup', dragUp); }) // 设置显示状态 function setVisible () { if(props.visible) { new Promise((resolve, reject) => { if(!_d.show1) { // 第一次通过v-if添加节点到dom树 setZIndex(); _d.show1 = true; _d.show2 = true; setTimeout(() => { // 判断是否加到body节点下 if(props.appendToBody) { let lastChild = document.body.appendChild(mDialogWrapperRef.value); } setTimeout(() => { resolve(); }, 15); }, 15); } else { // 关闭后不删除节点，再显示弹窗 _d.show2 = true; setTimeout(() => { resolve(); }, 30); } }).then(() => { document.body.style.overflow = "hidden"; _d.show3 = true; }) } else { // 关闭弹窗 _d.show3 = false; // 关闭时动画效果 setTimeout(() => { _d.show2 = false; // 设置display:none if(props.destroyOnClose) { _d.show1 = false; // 通过v-if销毁节点 } document.body.style.overflow = ""; emit('closed'); }, 250) } } // 显示的时候设置z-index function setZIndex() { let max = 1000; // 判断是否有自定义的层级 if(props.zIndex) { max = props.zIndex; } else { let aMd = [...document.querySelectorAll('.m-dialog.show')]; aMd.forEach(obj => { let num = getStyle(obj, 'z-index'); if(max 0) { minX = 0; } if(minY > 0) { minY = 0; } if(maxX > _d.drag.pageWidth - _d.drag.dialogWidth) { maxX = _d.drag.pageWidth - _d.drag.dialogWidth; } if(maxY > _d.drag.pageHeight - _d.drag.dialogHeight) { maxY = _d.drag.pageHeight - _d.drag.dialogHeight; } _d.drag.minX = minX; _d.drag.maxX = maxX; _d.drag.minY = minY; _d.drag.maxY = maxY; // 开始位置 _d.drag.startX = _d.drag.resultX; _d.drag.startY = _d.drag.resultY; // 鼠标点下时相对于page的位置 _d.drag.downX = e.pageX; _d.drag.downY = e.pageY; } function dragMove(e) { if(!props.draggable) { return; } if(!_d.drag.isDown) { return; } // 移动距离 _d.moveX = e.pageX-_d.drag.downX; _d.moveY = e.pageY-_d.drag.downY; // 涉及结果位置 let resultX = _d.drag.startX+_d.moveX; let resultY = _d.drag.startY+_d.moveY; if(resultX _d.drag.maxX) { resultX = _d.drag.maxX; } if(resultY _d.drag.maxY) { resultY = _d.drag.maxY; } _d.drag.resultX = resultX; _d.drag.resultY = resultY; } // 鼠标抬起 function dragUp(e) { if(!props.draggable) { return; } if(!_d.drag.isDown) { return; } _d.drag.isDown = false; } // 获取节点到body的高度 function getDistanceBody (obj) { var oBody = document.body; var oHtml = document.documentElement; var oParent = null; var oDistance = { top: 0, left: 0 } do { oDistance.top += obj.offsetTop; oDistance.left += obj.offsetLeft; oParent = obj.offsetParent; obj = oParent; } while(oParent && oParent != oBody && oParent != oHtml) return oDistance; } .m-dialog-wrapper { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.25); transition: opacity .25s; opacity: 0; overflow: auto; &.show { opacity: 1; .m-dialog { transform: scale(1); } } &.is-drag { -moz-user-select:none; /*火狐*/ -webkit-user-select:none; /*webkit浏览器*/ -ms-user-select:none; /*IE10*/ -khtml-user-select:none; /*早期浏览器*/ user-select:none; .m-dialog-title { cursor: move; } } .m-dialog-modal { display: table; padding: 20px 0 40px; min-height: 100%; min-width: 100%; box-sizing: border-box; } .m-dialog-cell { display: table-cell; vertical-align: middle; } .m-dialog-container { margin: 0 auto; } .m-dialog { position: relative; z-index: 2; border-radius: 2px; overflow: hidden; background: #fff; transition: transform .25s; transform: scale(0.9); box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d; .m-dialog-title { position: relative; box-sizing: border-box; padding: 16px 24px; border-bottom: 1px solid #f0f0f0; color: #000; font-size: 16px; line-height: 22px; word-wrap: break-word; min-height: 55px; .m-dialog-close { position: absolute; top: 50%; right: 0; margin-top: -27px; width: 54px; height: 54px; display: flex; justify-content: center; align-items: center; font-size: 16px; color: #666; cursor: pointer; &:hover { color: #333; } } } .m-dialog-content { padding: 24px; min-height: 100px; } .m-dialog-footer { padding: 10px 16px; text-align: right; background: transparent; border-top: 1px solid #f0f0f0; border-radius: 0 0 2px 2px; .btn { padding: 4px 15px; font-size: 14px; color: #333; border: 1px solid #d9d9d9; background: #fff; height: 32px; font-weight: 400; cursor: pointer; outline: medium; border-radius: 2px; &:not(:last-child) { margin-right: 8px; } } } } } 项目地址：[codesandbox上测试项目](https://link.segmentfault.com/?enc=UZXd7qH%2BzJPxJDT1puB%2Fwg%3D%3D.ViozVakQmKUtVxf8ri6FRsTDRT01XS%2Fdt2HEwO0Z1YFeAg5yhpYjdk6GaCfdiyoTMz2q2k%2Bt5FivNE%2BOzDt6CA%3D%3D) 如果将配置项（:appendToBody="false"）设置为false，不添加到body下，使用是没有问题的。设置为true，添加到body后，使用了预览图片功能，之后就会报错。 希望有人帮忙找出报错原因，及解决办法