超简单☞vue-photo-preview

忙？懒：懒。
好久没有更新东西了。忙里偷闲，记录点东西吧。

项目中需要图片预览功能。
首先想到的是，使用element的Dialog展示，但是需要改弹窗的样式，另外图片的宽度不固定，高度也不固定，这样做出来的效果比较难看。放弃了el-dialog。
然后想着网上有什么开源的组件，拿来直接用。总比自己造轮子强吧。看了 vue-photo-viewer之类的，基本上都是轮播形式，并且不能阴式的调用。不能满足需求。放弃。

自己动手丰衣足食，还是自己搞吧。

总结下常见的展示样式，然后自己搞了个，样式如下：

image.png

首先封装：

调用 this.showDialog=true ：

暂时功能可以满足放大缩小图片。

• 默认展示图片大小的80%，放在图片区域，鼠标变为放大镜，点击图片，可以放大至100%。这时鼠标变为缩小镜，再次点击可以改变图片至80%。

• 点击关闭按钮，或者图片以外的区域都可以关闭预览界面。

• 没有增加鼠标滚轮放大缩小的特效。

• 不支持轮播功能（暂时没有必要）。