【Element】el-dialog 內使用 el-image 並添加 preview-src-list 預覽，拖拽導致圖片預覽不完整問題

現象

el-dialog 內使用 el-image 並添加 preview-src-list 預覽，拖拽導致圖片預覽不完整

  <el-dialog
    width="500"
    v-model="visible"
    :title="activeProp?.name"
    @close="handleClose"
    :draggable="true"  // 可拖拽
    align-center
    modal-class="preview-entity-prop-dialog-modal"
    .....
      <el-image
          v-for="img in imageList"
          style="width: 100%; height: auto"
          :src="img"
          :preview-src-list="imageList" // 可預覽
          fit="contain"
        />

解決方法

添加 preview-teleported 屬性，官方對這個的解釋是：

image-viewer 是否插入至 body 元素上。 嵌套的父元素屬性會發生修改時應該將此屬性設置爲 true

        <el-image
          :preview-teleported="true"
          v-for="img in imageList"
          style="width: 100%; height: auto"
          :src="img"
          :preview-src-list="imageList"
          fit="contain"
        />

參考博客

解決el-image在el-dialog內預覽展示不全