不点击图片,直接实现el-image的大图预览功能

 接到个需求希望不需要点击图片可以直接进行放大、旋转等操作,

el-image 有个组件是image-viewer 基于改组件进行了部分修改

不点击图片,直接实现el-image的大图预览功能_第1张图片

 image-viewer组件滚动放大是基于document绑定的事件,这样会导致右侧内容过长出现滚动条的时候,用鼠标滚轮滚动右侧内容,左侧图片会跟着相应的放大缩小,导致用户体验不佳,做了如下修改:

鼠标滚动事件基于document改为基于el-image-viewer__wrapper

不点击图片,直接实现el-image的大图预览功能_第2张图片

 image-viewer .el-image-viewer__wrapper样式设置了position:fixed固定定位,导致拖动图片的时候容器区域会占据右侧的区域,做了如下修改:

将 .el-image-viewer__wrapper的固定定位改为绝对定位,把.el-image-viewer__img基于.el-image-viewer__canvas这个盒子进行绝对定位

不点击图片,直接实现el-image的大图预览功能_第3张图片

 完整代码如下:




vue文件中进行引用:

appendToBody:true表示将该组件放置于body层(body就是他的父),false表示放置在正常盒子里(imgCont-div是他的父)

appendToBody:true 代码效果图:

不点击图片,直接实现el-image的大图预览功能_第4张图片

 appendToBody:false 代码效果图:

 

你可能感兴趣的:(js,vue,vue.js,javascript,elementui)