功能背景：
最近项目上遇到一个需求：在点击图片预览时，弹出图片和遮罩，左右可切换图片，上下为放大图片，但重点是部分页面预览时，遮罩不能为全屏，要留出最左侧一块区域，在预览图片的同时，能进行表单编辑，大概布局：
未打开预览页面布局（如下图）：
未预览状态.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
结束，完成。
— — — — — — — — — — — — — — — — — — — — — — — — — — —
以上五个步骤，基本已经满足需求。如需要改变自定义预览宽度的位置，可在第五步中调整样式即可。
— — — — — — — — — — — — — — — — — — — — — — — — — — —
希望能够帮助到和我有类似需求的小伙伴，如有更好的方案大家可以一起探讨。
网友评论