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

news2024/10/5 21:14:25

现象

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/752095.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

归并排序与计数排序

目录 1.什么是归并排序 2.归并排序的实现 3.归并排序的非递归实现 4.计数排序 1.什么是归并排序 归并排序&#xff08;MERGE-SORT&#xff09;是利用归并的思想实现的排序方法&#xff0c;该算法采用经典的 分治&#xff08;divide-and-conquer&#xff09;策略 &…

服务保护 Sentinel

服务保护 Sentinel Sentinel 介绍Sentinel 的下载使用Sentinel 流控规则流控规则介绍流控规则演示 Sentinel 热点规则Sentinel 隔离和熔断降级Feign 整合 Sentinel线程隔离熔断降级 Sentinel 授权规则Sentinel 系统规则Sentinel 自定义异常Sentinel 资源定义url 默认资源抛出异…

Linux常用命令——emacs命令

在线Linux命令查询工具 emacs 功能强大的全屏文本编辑器 补充说明 emacs命令是由GNU组织的创始人Richard Stallman开发的一个功能强大的全屏文本编辑器&#xff0c;它支持多种编程语言&#xff0c;具有很多优良的特性。有众多的系统管理员和软件开发者使用emacs。 语法 e…

线性磁悬浮多输入多输出(MIMO)系统的线性系统控制器设计、实现和分析(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 ​磁悬浮列车作为一种新型地面交通工具,已经在实践中得到了成功的应用。传统的EMS型磁悬浮系统在结构上简单可靠,而且在技术上…

学习C#基础知识和应用:

C#语言基础知识&#xff1a;了解C#的开发环境、变量、语法和程序结构等基础内容。这些知识是理解和开发C#自动化控制系统的前提。刚好&#xff0c;我这里有上位机入门&#xff0c;学习线路图&#xff0c;各种项目&#xff0c;需要留个6。 Winform窗体控件的应用&#xff1a;Wi…

京东零售 / hotkey 热点key探测工具使用

1、安装etcd 在etcd下载页面下载对应操作系统的etcd&#xff0c;https://github.com/etcd-io/etcd/releases 使用3.4.x以上。 2、启动worker&#xff08;集群&#xff09; 下载并编译好代码&#xff0c;将worker打包为jar&#xff0c;启动即可。如&#xff1a; java -jar $J…

北邮国院物联网 Microprocessor 微处理器笔记

Introduction-随便聊 嵌入式系统是什么&#xff1f;专用的计算机系统。为专门功能可能对计算机架构&#xff0c;外设等做出一些取舍。 通常的限制&#xff1a;Cost&#xff08;比如大量部署传感器节点&#xff09;&#xff0c;Size and weight limits&#xff08;特定应用场景…

PHP代码审计(一)之PHP代码审计的意义

PHP代码审计的意义 什么是代码审计 什么是代码审计&#xff1f;代码审计就是获取目标的源代码&#xff0c;这个目标可以是一个网站&#xff0c;也可以是一个手机app&#xff0c;只要我们得到了目标的源代码&#xff0c;我们就可以去挖掘目标系统的漏洞&#xff0c;代码审计是…

详解Jenkins配置邮件通知

前言 这几天Darren洋在使用Jenkins定时构建jmeter脚本中&#xff0c;要用到邮箱配置&#xff0c;故记录之。 一、Jenkins默认邮箱通知 这里填好smtp服务器地址和邮箱后缀&#xff0c;这样下面的账号就不用加邮箱后缀了。 网易邮箱设置以下我就不说废话文学了&#xff0c;直接上…

从零搭建ros间的通信,各功能包、节点之间的通信

新建消息类型 catkin_create_pkg car_interfaces roscpp rospy std_msgs message_generation message_runtime书写自定义的msg&#xff1a; 比如我写一个GlobalPathPlanningInterface.msg&#xff1a; float64 timestamp #时间戳 float32[] startpoint #起点位置&#x…

【技能实训】DMS数据挖掘项目-Day01

文章目录 任务1 项目准备一、开发环境二、系统简介三、项目创建 任务2【任务2.1】菜单项设计及其测试【任务2.2】使用数组存储采集的数据【任务2.3】控制显示采集的数据 任务1 项目准备 一、开发环境 1.JDK8下载及其环境变量配置(JDK8以上版本) 2.IDE &#xff1a;Eclipse 或…

马可·坎图 (Marco Cantú) 荣获尼克劳斯·沃斯奖 (Niklaus Wirth Award) Pascal最具价值贡献者奖

我们非常高兴地宣布&#xff0c;我们自己的Marco Cant荣获由西班牙萨拉曼卡大学主办的国际Pascal大会颁发的Niklaus Wirth奖。 评审团的引文最后这样一句话&#xff1a;“ Marco Cant 是Pascal社区最杰出、最原创、最杰出的人物之一”。我不认为我们自己可以说得更好。 国际Pa…

rabbitmq使用笔记

前言 mq的优点&#xff1a;异步提速、解耦、流量削峰 mq的缺点&#xff1a; mq宕机可能导致消息丢失、消费者未成功消费如果保证整个系统架构的事务安全、消息可能被重复消费出现幂等问题、消息未被消费到引发死信问题、消息出现消费延迟或消费异常引发的顺序消费错乱问题...…

Linux 修改网卡 MAC 地址

使用 iproute2 修改网卡 MAC 地址 1. 使用如下命令查看当前所有网卡及其 MAC 地址&#xff1b; sudo ip link show2. 如笔者这里想要修改网卡 ens224 的 MAC 地址&#xff0c;先使用如下命令关闭该网卡&#xff1b; sudo ip link set dev ens224 down3. 设置该网卡的 MAC 地…

阿里云:机器学习平台及OpenSearch

机器学习流程 相关项目 BladeDISC-AI编译优化 EasyRec-推荐算法库 EasyCV-视觉图像算法库 EasyNLP-NLP/多模态算法库 模型开发中算法团队面临的工程挑战 Develop platform OpenSearch 向量检索库

亚马逊云科技迁移只需5个简单步骤(2023年迁移到云)

您是否正在考虑亚马逊云科技迁移&#xff0c;并将本地项目迁移到云中&#xff1f; 但是不知道从哪里开始以及如何去做&#xff1f; 在这篇文章中&#xff0c;我将指导您完成亚马逊云科技迁移。 什么是亚马逊云科技&#xff1f; 亚马逊云科技或亚马逊网络服务是最受欢迎的云平…

jar程序部署的外部依赖和按名传参和shellUtil传参json串及返回pid问题

文章目录 指定jar程序运行的外部依赖指定参数名称传参给程序shellUtil命令传参JSON串shellUtil获取回调nohub启动程序后的pid 指定jar程序运行的外部依赖 nohup java -Djava.ext.dirs./lib/ -cp DataSourceAccessPage.jar com.sitech.adapter.JsonAdapter arg0 arg1java -cp 命…

10_SPI_Flash 连续写实验

10_SPI_Flash 连续写实验 1. 实验目标2. 连续写方法3. 操作时序4. 流程框图4.1 顶层模块4.2 连续写模块 5. 波形图6. RTL6.1 flash_seq_wr_ctrl6.2 spi_flash_seq_wr 7. Testbench 1. 实验目标 使用页写指令&#xff0c;将串口发送过来的连续不定量数据写入 Flash。本实验中&a…

Linux开发环境的搭建

文章目录 系统安装工具软件安装Xshell远程登录VScode远程登录Linux 下GCC安装 系统安装 &#xff08;虚拟机安装、云服务器&#xff09;Ubuntu18.04 网络类型&#xff1a;桥接模式网络、NAT&#xff08;network access transation)网络地址转换模式、仅主机模式 注意&#xff…

模拟电压与数字脉冲占空比控制的应用与发展前景

摘要&#xff1a;本文将讨论模拟电压控制和数字脉冲占空比控制在嵌入式控制方面的应用场景、共同点和不同点&#xff0c;并探讨它们在未来发展中的前景。 引言&#xff1a; 模拟电压控制和数字脉冲占空比控制都是嵌入式系统中常用的控制方式。模拟电压控制将电压作为控制信号&…