首页 > 其他分享 >【Element】el-dialog 内使用 el-image 并添加 preview-src-list 预览,拖拽导致图片预览不完整问题

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

时间:2023-08-29 11:57:18浏览次数:34  
标签:el 预览 src image dialog preview

现象

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内预览展示不全

标签:el,预览,src,image,dialog,preview
From: https://www.cnblogs.com/wx980416/p/17664375.html

相关文章

  • 【Element】el-image 预览功能配置
    <el-image:preview-teleported="true"v-for="imginitem.imageList"style="width:100%;height:auto":src="img":preview-src-list="item.i......
  • 【Vue】vue3 中 如何将el-table的表格数据下载为.xlsx格式文件
    安装依赖首先,你需要安装xlsx和file-saver这两个库。npminstallxlsxfile-saver--save有兴趣可以看看两个库的官方说明,直接看下面使用也没问题。xlsx官方介绍TheSheetJSCommunityEditionoffersbattle-testedopen-sourcesolutionsforextractingusefuldata......
  • selenium - 鼠标悬停点击
    前言:常见一些网页都是带有类似下图,当鼠标悬停在隐藏文本内容上时,显示所有内容。例如:我要点击“搜索设置”,先得把鼠标放在‘设置上’ F12-在页面中搜索‘高级搜索’,找到“搜索设置”文本,鼠标放到‘设置’上,display的值变为block;鼠标不放上去之前是none,即不可见元素。  ......
  • Java 14 EL表达式
     eljstl.jsp<%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>Title</title></head><body><h1>首页</h1><%--指令包含<%@includefile=......
  • 深入探究Elasticsearch中的倒排索引技术
    在现代后端开发中,搜索引擎和数据检索是至关重要的功能。Elasticsearch作为一款开源的分布式搜索和分析引擎,其背后的核心技术之一就是倒排索引(InvertedIndex)。本篇博客将深入探讨倒排索引在Elasticsearch中的应用,以及如何利用这一技术来优化数据检索性能。什么是倒排索引?倒排索引是......
  • 1.5 编写自定位ShellCode弹窗
    在笔者上一篇文章中简单的介绍了如何运用汇编语言编写一段弹窗代码,虽然简易ShellCode可以被正常执行,但却存在很多问题,由于采用了硬编址的方式来调用相应API函数的,那么就会存在一个很大的缺陷,如果操作系统的版本不统或系统重启过,那么基址将会发生变化,此时如果再次调用基址参数则会......
  • 1.6 编写双管道ShellCode
    本文将介绍如何将CMD绑定到双向管道上,这是一种常用的黑客反弹技巧,可以让用户在命令行界面下与其他程序进行交互,我们将从创建管道、启动进程、传输数据等方面对这个功能进行详细讲解。此外,本文还将通过使用汇编语言一步步来实现这个可被注入的ShellCode后门,并以此提高代码通用性。......
  • 关于Python的学习记录(二十五_yield 关键字和生成器)
    Python中,生成器(Generator)是一种特殊的迭代器,它可以通过函数来创建。生成器函数使用 yield 关键字来产生一个值,并且在每次调用 yield 时暂停执行,保留函数的状态,以便下次调用时可以从上次暂停的地方继续执行。生成器具有以下特点:生成器函数使用def关键字定义,但是它们的执行方......
  • Cisco SD-WAN (Viptela) version 20.12.1 ED - 软件定义广域网
    CiscoSD-WAN(Viptela)version20.12.1ED-软件定义广域网请访问原文链接:https://sysin.org/blog/cisco-sd-wan-20/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org支持SASE的架构,其集成了面向多云、安全、统一通信和应用优化的各种功能,可用于轻松安全地将任何......
  • Cisco ISR 4000 Series IOS XE Release Dublin-17.12.1a ED - 思科 4000 系列集成服
    CiscoISR4000SeriesIOSXEReleaseDublin-17.12.1aED思科4000系列集成服务路由器请访问原文链接:https://sysin.org/blog/cisco-isr-4000/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org思科4000系列集成服务路由器让您的分支机构站点为实施全数字化转型......