vue中使用viewer.js实现图片的放大、旋转、缩小

viewwejs是一个强大的图片查看插件，在使用的过程中有很多中用法，这里我结合实际项目使用了其中的一种，哈哈。。。

下面我就讲讲的踩过的坑和实现的思路.....

1、在vue项目的中用npm安装插件：

npm install v-vierwer
npm install viewerjs

2、封装一个组件viewercoms,然后在里面引入vierwer.css...

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)

3、下面就开始编写组件啦，我主要是通过父组件的点击事件在触发该组件的viewer，使用了v-viewer指令

代码如下:
<template>
  <div class="main">
    <div class="images" v-viewer="{movable: false}">
      <img v-for="(item,index) in imagesUrl" :src="item" :key="item" :data-original="item">
    </div>
  </div>
</template>
<script>
 import 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(Viewer)
export default {
  name: "ViewerImg",
  props: {
    //图片集合
    imagesUrl: {
      type: Array,
      default:()=>[]
    }
  },
  components: {},

  data() {
    return {};
  },

  computed: {},
  created() {},
  mounted() {
  },
  methods: {
     show (index) {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.view(index)
      }
  }
};
</script>
<style lang='scss' scoped>
.main{
display:none;
 .images{
   width:0px;
   >img{
     width:100%
   }
 }
}
</style>

//这里的viewer.view(index)要强调下，刚开始我是使用show()方法，然后出现了点击图片显示不对应的问题，所以改用view()

4、接下来就是父组件调用啦：

 <img class="chat-img" :src="item.content" @click="checkImg(item.content)">
 
 //组件,imagesUrl必须是个数组
 <gpViewerImg :imagesUrl="images" ref="comView"></gpViewerImg>
 
 js:
  checkImg(index) {
  this.$refs.comView.show(index);
 },

好啦，总体就是这样，完结！！！