【Element】el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整问题

最新推荐文章于 2024-09-30 14:08:48 发布

努力挣钱的小鑫

最新推荐文章于 2024-09-30 14:08:48 发布

阅读量2k

点赞数 1

分类专栏： Element 文章标签： vue.js 前端 javascript Element

本文链接：https://blog.csdn.net/IAIPython/article/details/131717701

版权

Element 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

现象

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"
        />