在vue项目中使用图片浏览组件v-viewer，支持旋转、缩放、翻转等操作

1.在vue项目中安装v-viewer

使用npm安装：

 npm install v-viewer

 

2.在vue中的main.js引入：

import Viewer from 'v-viewer'

import 'viewerjs/dist/viewer.css'

Vue.use(Viewer);

Viewer.setDefaults({

    Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }

  });

 

3.在项目中使用v-viewer

<viewer :images="fiellists">

            <img

              v-for="(imgItem, imgIndex) in fiellists"

              :key="imgIndex"

              class="previewImg"

              :src="imgItem.file"

              alt=""

              width="80"

              height="80"

            />

          </viewer>

 

4.效果：

更多详细内容可以查看：https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/