H5，Vue，实现图片预览功能，可双击放大，复位，重置，双指放大缩小图片，使用 hammerjs插件

H5，Vue，实现图片预览功能，可双击放大，复位，重置，双指放大缩小图片，使用 hammerjs插件

1. npm 下载插件hammerjs

npm install --save hammerjs

2. html 界面

//在界面上展示的图片 路径换成自已的图片路径
<div class="imgWrap">
 <img src="../assets/img/active.jpg" alt="" @click="clickImg">
</div>
// 展示预览的组件  van-icon 是用的vant的icon图标，自己项目里用自己的图标
<van-overlay :show="show">
  <van-icon name="close" size="30" color="#fff" @click="closeFn" v-show="show" style="position:fixed;top:0;right:0;margin:10px;z-index:100"/>
  <div class="imgWrapPop" ref="activeBox" style="">
    <img src="../assets/img/active.jpg" alt="" >
  </div>
</van-overlay>

3. 引用