vue框架应用v-viewers图片点击放大,且自定义预览宽度

功能背景:
最近项目上遇到一个需求:在点击图片预览时,弹出图片和遮罩,左右可切换图片,上下为放大图片,但重点是部分页面预览时,遮罩不能为全屏,要留出最左侧一块区域,在预览图片的同时,能进行表单编辑,大概布局:

未打开预览页面布局(如下图):


未预览状态.jpg

某个页面点击图片打开预览为四分之三屏(如下图):


四分之三屏预览.jpg

其他页面点击图片打开预览为正常全屏(如下图):


正常全屏预览状态.jpg

— — — — — — — — — — — — — — — — — — — — — — — — — — —

以上就是大概的功能需求背景,接下来就是各种尝试,最终终于找到解决方案并完成一个dome。
— — — — — — — — — — — — — — — — — — — — — — — — — — —
项目主框架为vue,最终应用的图片预览组件为 v-viewer,此组件的属性可以查看:https://github.com/fengyuanchen/viewerjs

第一步:安装依赖
npm install --save v-viewer

第二步:全局引入
在main.js文件中,进行全局引入,并初始化


image.png

第三步:在页面组件中使用
注意:
1.全局注册完后,只要是viewer标签中包裹的img标签,viewer会自动去处理;
2.其中photos变量必须为数组;
3.如果图片是异步获取,那么viewer标签上必须加 images属性,值为photos数组


image.png

以上步骤可以应用于全屏预览(如上图:正常全屏预览状态),如果不需要自定义预览宽度,那么以上步骤就可以达到目的,无需以下步骤。
如果一个应用中部分页面需要自定义预览宽度(如上图:四分之三屏预览),部分页面又需要全屏预览(如上图:正常全屏预览状态),那么接下来关键步骤:

第四步:为viewer增加一个class
在router -> index.js 中加入下图红框内的代码:
v-viewer组件的属性中有一个属性为className,再和router.beforeEach全局守卫配合来区分判断。

1.‘/about’:是需要自定义预览宽度的页面路径(可根据实际情况而定)
2.‘halfBg’:是需要增加class的name(可根据实际情况而定)


image.png

第五步:为增加的class,写入样式
在app.vue中加入全局样式
其中310px可按照实际情况而定,-155px为310px的二分之一


image.png

结束,完成。

— — — — — — — — — — — — — — — — — — — — — — — — — — —

以上五个步骤,基本已经满足需求。如需要改变自定义预览宽度的位置,可在第五步中调整样式即可。
— — — — — — — — — — — — — — — — — — — — — — — — — — —

希望能够帮助到和我有类似需求的小伙伴,如有更好的方案大家可以一起探讨。

你可能感兴趣的:(vue框架应用v-viewers图片点击放大,且自定义预览宽度)