第一步安装：

npm install v-viewer --save

第二步注册调用：

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" }
});

第四部使用：

<viewer :images="tupians">
      <i-col span="4" v-for="item in tupians">
          <div class="detailed">
            <img :src="item.img" alt="">
          </div>
      </i-col>
</viewer>
数据部分
        tupians:[
          {
            img:tupian1,
          },{
            img:tupian2,
          },{
            img:tupian3,
          }
        ],

效果如下：

xiaoguo.gif

其他使用方法可以在github上查看viewerjs