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

现象

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

  <el-dialogwidth="500"v-model="visible":title="activeProp?.name"@close="handleClose":draggable="true"  // 可拖拽align-centermodal-class="preview-entity-prop-dialog-modal".....<el-imagev-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.hqwc.cn/news/28620.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华夏ERP在虚拟机Ubuntu上的安装(测试实例)

1.虚拟机软件VirtualBOX 7.0 2.Ubuntu 版本 3.宝塔面板安装 百度搜索宝塔面板&#xff0c;按官网提示进行安装。下面截图是官网示例。 if [ -f /usr/bin/curl ];then curl -sSO download.cnnbt.net/install_panel.sh;else wget -O install_panel.sh download.cnnbt.net/install…

【C语言】指针数组测试题(1万字长文)

江南可采莲&#xff0c;莲叶何田田。鱼戏莲叶间。鱼戏莲叶东&#xff0c;鱼戏莲叶西&#xff0c;鱼戏莲叶南&#xff0c;鱼戏莲叶北。 — 两汉汉乐府《江南》 这篇博客我们将会讲解一些习题&#xff0c;习题是有关于数组和指针的&#xff0c;数组方面的习题也能帮助我们更好的理…

基于 Junit 的接口自动化测试框架实现

目录 前言&#xff1a; 分层的自动化测试 接口测试的意义 接口测试框架选型 我们封装的接口测试框架 接口测试关键实践 测试代码规范 (仅供参考) 前言&#xff1a; 基于JUnit的接口自动化测试框架可以实现对接口进行自动化测试&#xff0c;并提供了丰富的断言和报告功能…

一文解惑mybatis中的#{}和${}

目录 基本概述 #{}的基本使用 ${}的基本使用 ${}使用情况 sql排序asc|desc 拼接表名 批量删除 模糊查询 基本概述 #{}&#xff1a;先编译sql语句&#xff0c;再给占位符传值&#xff0c;底层是PreparedStatement实现。可以防止sql注入&#xff0c;比较常用。 ${}&…

【技术指南】3D转换工具HOOPS Exchange的功能特征和典型使用场景全解析(二)

什么是 HOOPS Exchange&#xff1f;HOOPS Exchange 是一组软件库&#xff0c;可以帮助开发人员在开发应用程序时读取和写入主流的 2D 和 3D 格式。HOOPS Exchange 支持 在主流的3D 文件格式中读取 CAD 数据&#xff0c;并支持将 3D 数据转换为 PRC 数据格式&#xff0c;这是一种…

关于unity Content Size Fitter 套 Content Size Fitter

首先&#xff1a;最好不要unity Content Size Fitter 套 Content Size Fitter 这样最后得到的变化可能会错误 unity也提示了&#xff0c;父物体如果有了&#xff0c;那么子物体就不要再加了。 但是你们要的需求&#xff1a; 一级父物体 ➡自适应大小➡二级父物体&#xff08…

番外-sql server数据库表及视图未备份,误删恢复

&#xff08;1&#xff09;关闭sql server服务&#xff0c;防止数据发生更大变化&#xff1b;备份数据库的ldf文件和mdf文件&#xff08;非常重要&#xff09; &#xff08;2&#xff09;安装工具ApexSQLLog &#xff08;3&#xff09;运行工具 首先设置一下数据库连接的方式…

MediaType的常用类型-GPT问答

MediaType的常用类型-GPT问答 MediaType是一个枚举类&#xff0c;包含了常见的媒体类型。下面是一些常用的MediaType类型&#xff1a; APPLICATION_JSON&#xff1a;JSON格式的数据APPLICATION_XML&#xff1a;XML格式的数据APPLICATION_FORM_URLENCODED&#xff1a;表单格式的…

JVM笔记

1&#xff0c;什么是JVM 1.1 定义&#xff1a; Java Virtual Machine ,是java程序的运行环境(java二进制字节码的运行环境) 1.2 优势&#xff1a; 一次开发&#xff0c;到处运行自动内存谷粒&#xff0c;垃圾回收功能数组下标越界检查(防止越界覆盖其他数据结构的内存)多态…

深度学习——CNN卷积神经网络

基本概念 概述 卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;是一种深度学习中常用于处理具有网格结构数据的神经网络模型。它在计算机视觉领域广泛应用于图像分类、目标检测、图像生成等任务。 核心思想 CNN 的核心思想是通过利用局部…

基于springboot+Redis的前后端分离项目(九)-【黑马点评】

&#x1f381;&#x1f381;资源文件分享 链接&#xff1a;https://pan.baidu.com/s/1189u6u4icQYHg_9_7ovWmA?pwdeh11 提取码&#xff1a;eh11 附近的商户、用户签到、UV统计 &#xff08;一&#xff09;附近的商户1.附近商户-GEO数据结构的基本用法2.附近商户-导入店铺数据到…

uni-app实现emoj表情包发送(nvue版)

uni-app实现表情包发送&#xff0c; vue实现思路直接使用grideview网格布局加载emoj表情包即可实现&#xff0c;很简单&#xff0c;但是nvue稍微复杂&#xff0c;这里采用的方案是nvue提供的组件list 看效果 代码 <template><view style"margin-right: 10rpx;m…