【elementplus】el-image图片预览的显示不全问题（和el-table、el-dialog组合使用时）

最新推荐文章于 2024-07-16 09:49:30 发布
最新推荐文章于 2024-07-16 09:49:30 发布
阅读量1.3k 收藏 11
点赞数 6
分类专栏： VUE 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41838682/article/details/136542118
版权
文章讨论了在Vue3项目中，如何处理el-table和el-dialog结合时el-image图片预览显示不全的问题，提供了解决方案，包括设置`teleported`属性以及推荐将这两个组件抽离到单独的子组件以避免尺寸冲突。
摘要由CSDN通过智能技术生成

问题：
在和el-table、el-dialog组合使用时，el-image图片预览的时候，会可能出现显示不全图片的情况。
图片来自https://blog.csdn.net/qq_43458194/article/details/123287102

解决方法：

        <el-image-viewer
            :z-index="3000"
            :teleported="true"
        />

element文档中有属性：
在这里插入图片描述
设置后即可。

如果仅是使用el-image这个组件的话，是preview-teleported="true" 设置这个属性。

扩展：
将el-dialog+el-image抽成一个组件的写法，避免出现图片宽高超过范围了显示不全的问题

参考文章：
[Vue3+Element-Plus]点击列表中的图片预览时，图片被表格覆盖问题

Lana学习中
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-image 大图预览总是不顺利?试试这个方法
bobringtheboys的博客
04-08 1814
不知道为什么我的项目中我点了大图所弹出的那个大图预览的div包含在了标签中,并没有全部展开,那我索性就直接控制它的弹框好了 需要注意的是 这个组件需要单独引入哈, 在引入element-ui的前提下 import ElImageViewer from 'element-ui/packages/image/src/image-viewer' export default { components: { ElImageViewer }, ..... <el-image-viewer
使用vue+element ui图片放大预览遮盖层异常
weixin_46083166的博客
04-18 4316
使用element一个图片放大预览遮盖层只挡了一部分，如图 错误代码 <el-image style="width: 100px; height: 100px" :src="'http://localhost:9090/file/'+scope.row.jlHeadurl" :preview-src-list="['http://localhost:9090/file/'+scope.row.jlH
el-table和 el-image图片预览层叠问题解决
最新发布
webEvelement的博客
07-16 317
上面是el-table和el-iamge预览的时候展示层叠错乱。（2）找到app.css并添加如下代码即可正常展示。（1）首先在el_table里面添加类。
【招招制敌】修改element-ui中el-image 预览图大小的默认尺寸，让展示效果更加有呼吸感
追寻上飞的博客
10-14 3003
在未修改前，el-image 预览图大小的默认尺寸是全屏显示。这样给人没有呼吸感。最外层的封装定位方式由固定改为绝对，画布的定位方式改为绝对，高度改为原来的。首先先到的就是通过类选择器选中进行修改，但不见效。如图所示，呼吸感蹭一下就上来了。，距离外层容器的高度偏移改为。
el-image大图预览显示在父组件，无法全屏显示的问题
weixin_41138247的博客
08-28 6043
开发gis项目，通常会定制右侧容器组件，通过插槽插入子组件，各模块功能内容在右侧容器中展示。当通过el-image实现大图预览时，发现只能在容器组件中展示，查找原因，发现是：如果父元素的 transform, perspective 或 filter 属性不为 none 时，fixed 元素就会相对于父元素来进行定位的原因导致。如下图： 解决方案： 方法一：更改容器定位方式，不使用transform进行偏移。 方法二：若父容器不便于更改，只能考虑更改 el-image-viewe...
vue3 + element-plus 使用Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
技术前端，忠于热爱 @回忆哆啦没有A梦
05-30 7646
vue3 + element-plus 使用 Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
element-plus图片预览
weixin_57092157的博客
05-18 3313
项目中需要对图片进行放大预览操作；使用 el-image 自带的预览功能；②使用 el-image-preview 组件进行预览；
使用el-dialog放大图片
farmss的博客
09-14 740
使用el-dialog使点击图片放大，参考下面这位前辈的方法，成功实现。vue 模态框 el-dialog 实现点击图片查看大图功能_@必意玲-CSDN博客<!-- 图片查看dialog --><img :src="item.content" class="avatar" @click="imgViewDialog_show(item)" /><el-dialog title :visible.sync="imgViewDialogVisible" class="imgView
elementPlus的dialog组件封装
outsider76557的博客
02-08 3335
公司业务可能需要进行一些组件的封装，基于第三方elementPlus框架，进行符合UI设计原型的组件封装，这篇主要讲解Dialog弹出框的封装。
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
在这个特定的案例中，我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将详细阐述这些功能的实现方法。 首先，**无限滚动**是提高用户体验的一种常见技术，特别是在处理大量数据...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
解决vue中el-tab-pane切换的问题
10-15
在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是...
【vue3+element-plus】el-image点击图片预览时，被表格覆盖问题，加preview-teleported也不生效
m0_59699613的博客
11-14 1799
设置此属性，是将image-viewer 插入至 body 元素上。而运行项目点击预览图片，image-viewer 并没有插入至 body 元素上。搜集很久解决方案都是加：preview-teleported=‘true’，但我这个项目没有生效。最终问题解决，image-viewer 插入至 body 元素上。# 使用 yarn 的情况，安装最新版本。# 使用 npm 的情况，安装最新版本。
vue3 element-plus 实现图片预览
weixin_44832362的博客
01-31 6657
vue3 element-plus 实现图片预览
element-Plus表格组件中使用el-image图片预览功能的踩坑
BewHYzzz的博客
09-22 2545
解决方案：在el-image中加入属性 preview-teleported="“true”"，即可正常预览。在表格内点击图标，进入大图预览模式。
Element-Plus 图片预览多种实现方法
我总是词不达意的博客
01-08 5406
Element-Plus 图片预览多种实现方法
大屏使用el-image组件全屏后图片预览时不显示
m0_70542915的博客
11-16 1064
但大屏中我们全屏的一般都是指定的标签，全屏之后这个标签就会覆盖body标签，自然就导致图片预览的图片被我们全屏的标签覆盖，解决办法就是去掉这个属性即可。另外大屏中因为很多地方都有图片预览功能，但并不是每个地方都用的el-image组件，也有点击按钮预览图片的，所以我单独使用了el-image-viewer组件，并把它放到要全屏的标签中。vue3+element-plus写大屏时遇到的一个问题，el-image组件添加了图片预览功能，但是大屏全屏之后点击预览的时候看不到图片，退出全屏后能正常显示。
elementplus el-popover里面放el-dialog，dialog在popover下方显示
07-22
你可以通过设置`el-dialog`的样式来实现在`el-popover`下方显示。首先，你需要确保`el-dialog`的父元素具有相对定位(`position: relative`)，以便进行定位。然后，你可以使用绝对定位(`position: absolute`)来将`el-dialog`放置在`el-popover`下方。 以下是一个示例代码： ```html <template> <div class="container"> <el-popover ref="popover" placement="bottom" title="Popover"> <el-button slot="reference">Click me</el-button> <el-dialog title="Dialog" :visible.sync="dialogVisible" :before-close="beforeClose" > <span>Dialog content</span> </el-dialog> </el-popover> </div> </template> <script> export default { data() { return { dialogVisible: false }; }, methods: { beforeClose(done) { // 关闭 dialog 时同时关闭 popover this.dialogVisible = false; this.$refs.popover.doClose(); done(); } } }; </script> <style> .container { position: relative; } .el-dialog { position: absolute; bottom: -100%; z-index: 9999; /* 可根据需求调整层级 */ } </style> ``` 在上述示例中，我们将`el-dialog`设置为绝对定位，并将其底部位置设置为负值，使其隐藏在父元素外部。然后，在需要显示`el-dialog`时，通过将`dialogVisible`设置为`true`来显示它。同时，我们通过调用`el-popover`的`doClose`方法来关闭`el-popover`，以保持一致的交互体验。 请根据你的实际需求调整代码，并确保为`el-dialog`和`el-popover`添加适当的样式和事件处理。希望能对你有所帮助！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值