wordpress网格布局,百家号seo,2021年企业所得税政策,免费数据分析网站同学们可以私信我加入学习群#xff01; 正文开始 前言一、问题描述二、原因分析三、解决方案总结 前言
最近在写个人项目的web端和浏览器插件#xff0c;其中一个功能是base64和图片的转换。因为分成四个小功能#xff0c;所以使用的iview的tabs来展示不同功能#xff0c…同学们可以私信我加入学习群 正文开始 前言一、问题描述二、原因分析三、解决方案总结 前言
最近在写个人项目的web端和浏览器插件其中一个功能是base64和图片的转换。因为分成四个小功能所以使用的iview的tabs来展示不同功能在其中图片转base64和base64转图片时都需要图片预览功能。
如下图 一、问题描述
点击上面图片的预览按钮发现图片显示不正常。打开f12管理者工具找到这部分代码发现预览的代码已经渲染到页面 鼠标悬停在那个图片地址上发现路径也正确正常获取到了图片
二、原因分析
网上找了一圈也没人遇到这个问题所以一点点定位代码去看了源码发现预览组件的源码没什么问题这部分不赘述。
只能用普通但好用的方式定位哪部分代码出现问题。
在f12里复制这段代码主要复制包含图片的部分然后开始往父级一点点粘贴最终发现粘贴到tabs那层图片正常显示。
分析问题tabs组件渲染后的整体结构可能略复杂我们的重点不是去研究它所以后面只是讨论大体结构。tabs里面渲染了tabpanetabs是个父容器里面放着四个主体内容点击标签切换主体时主要是依赖下面的css代码
transform:translateX(-100%) translateZ(0px)每次点击标签通过控制x轴偏移量实现当前视图显示哪部分元素。我们在f12里把这个属性去掉发现其实预览组件和图片都正常渲染只不过跟着tabpane标签一起被移出屏幕。
三、解决方案
无非是两个方案 1.预览组件渲染位置修改 最简单的就是把预览组件移到最外面去预览组件的定位是fixed这是依据浏览器窗口定位的现在的问题时浏览器窗口都被偏移了所以预览组件跟着偏移。所以把预览组件放到偏移的元素之外就会解决问题。 2.预览组件样式修改 经过组件化后我的预览功能和tabpane主体部分是在同一个组件后续预览功能的图片数据是依托于tabpane主体部分的如果把预览组件放到最外层确实可以解决问题但是不论从复杂度还是代码架构设计都不太好。
所以还有第二种方案修改tabs和预览组件ImagePreview样式。
我们要实现的最终效果是让预览组件不要跟着tabs这个大容器偏移而是永远和所属的tabpane父元素重合。也就是要依据tabpane元素定位。
查看tabpane渲染后的html发现它没有写定位 现在为tabpane标签增加相对定位作为预览组件的依据 Tabs classc-tabTabPane styleposition:relative; v-for(tab, index) in tabList :keyindex :labeltab.label :nametab.nameComponent :istab.com/Component/TabPane/Tabs然后先在f12中修改ImagePreview渲染后的图片和mask遮罩元素的定位改为绝对定位 发现问题解决效果如图 总结
获取资源查看代码示例或者联系我
https://lizetoolbox.top:8080/#/qrCode_contact
