解决Vue弹窗组件在使用ant-design-vue图片预览功能时崩溃的问题，关键在于调整弹窗组件的渲染位置。通过使用teleport组件并将appendToBody设置为true，可以将弹窗组件直接渲染到元素中，避免与异步渲染组件冲突。

以下是修改后的代码示例，它展示了如何使用teleport组件来解决这个问题：

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

<template>
  <teleport to="body">  <!-- 将弹窗渲染到body -->
    <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"
          >
            <div class="m-dialog" ref="mDialogRef">
              <div class="m-dialog-title"></div>
              <div :style="bodyStyle" class="m-dialog-content"></div>
              <div class="m-dialog-footer"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </teleport>
</template>

通过这个简单的修改，可以有效避免弹窗组件渲染崩溃，确保ant-design-vue图片预览功能的正常使用。 请注意，此解决方案假设_d对象包含弹窗的显示状态和样式信息，props.draggable控制是否可拖动，bodyStyle包含弹窗内容的样式。 根据您的实际代码，可能需要进行微调。