造轮子之图片预览组件(preview)

图片放大预览是种很常见的场景和功能，一般移动网站首页的轮播 banner，商品详情页的商品图片等位置都会用到此功能

像这种常用的场景功能肯定是有人早就写好插件了的，所以遇到这种场景，一般都遵循以下三步：

• 打开冰箱 启动 Github
• 搜索 photo、preview、carousel、photoSwipe等关键字
• 找到想要的库，npm install之

这种做法没毛病，有现成的轮子可用当然拿来主义，因为项目用的是 vue，所以我在网上找了一圈 基于 vue的放大预览组件库，结果令我有点意外，图片放大预览的库的数量明显比不上轮播组件库，并且更令人 智熄 的是，这些少得可怜的组件库中，其中一大半都是基于 PhotoSwipe 这个开源库进行的二次封装，除此之外，能用于实际生产的预览组件库(image gallery)……好像没有（也可能是我见识短浅），这种情况不仅体现在 vue库上，其他框架乃至是原生的相关库都是如此

虽说不提倡重复造轮子，但轮子太少没有选择的余地也有点说不过去， PhotoSwipe 用起来很顺手，功能也很齐全，足以应对实际生产环境中的绝大部分场景

但与此同时，也就代表它代码体积会比较大，引入的冗余代码会比较多，于是，抱着精简代码以及顺便丰富放大预览插件家族的想法，决定自己造个轮子

先看下最终实现效果：

或者你想自己体验一下，这里也有个写好的 Demo

我已经将此功能打包成了一个 npm package，可直接下载安装使用，包括样式在内的代码体积压缩后不到 22KB，Gzipped之后不到 8KB，源码 已上传

滑动形式

滑动形式的选型与 造轮子之图片轮播组件(swiper)中的一样，就不多说了

数据处理

数据处理和 造轮子之图片轮播组件(swiper) 中的第一种方法一样，就不多说了：

<VueActivePreview :urlList="urlList" />

touch事件

此组件的 touch事件比较复杂，并且涉及到不同 touch事件之间的交互，所以稍微麻烦点，不过只要条理清晰，考虑清晰，还是可以解决的

单指滑动

单指滑动的主体逻辑与 造轮子之图片轮播组件(swiper)的相差不多，都是计算手指滑动的距离，通过不断改变 translate的值进行位移

双指缩放

支持对单个图片的缩放操作，原理其实很简单，通过计算在起始时与滑动过程中双指间距离的比例，就可以得到图片的缩放比例

获取双指间距离：