Vue在移动端实现图片的手指缩放

使用V-View点击图片进行预览：

npm install v-viewer --save

在main.js进行引入

在图片下方会有 轮播箭头下一张上一张等，因此要用配置来关闭。    

import Viewer from 'v-viewer' // viewer.js一种图片预览处理工具
import 'viewerjs/dist/viewer.css' 
Vue.use(Viewer, {
  defaultOptions: {
    'zIndex': 9999,
    'inline': false, // 启用 inline 模式
    'button': true, // 显示右上角关闭按钮
    'navbar': true, // 显示缩略图导航 
    'title': false // 显示当前图片的标题

  }
})

使用方法：

这里是因为我的需求是直接点击图片触发，因此需要隐藏。

    <el-image
          style="margin-bottom: 40px"
          :src="stepSix"
          @click="tpDialogOpen(stepSix)"
        >
 </el-image>

tpDialogOpen会将图片地址传给v-view

   <viewer :images="[srcPrew]">
      <img id="myPrew" :src="srcPrew" style="width: 100%" v-show="hidden" />
    </viewer>