pinch-zoom-is 在vue 移动端中的运用

根据项目要求，需要对图片进行缩放和拖拽的处理，但是因为需要的要求较少且是适应与移动端的，所以没有使用vivew 而是采用了pinch-zoom插件，具体如下

  <!-- <template>-->
   <div class='contentop'>
        <div class="pinch-zoom" id="rotate">
            <img src="" ref="conimg" id="myimage" />
        </div>
        <div class="arr-center arr_common">
            <span @click="rotate">
                <img src="@/assets/abd/image/rutren.png" alt="">
            </span>
        </div>
    </div>
	
	import PinchZoom from 'pinch-zoom-js'
	<script>
		export default {
	    name: 'policy',
	    props: {
	        arrImg:Array,
	    },
 mounted() {
 //初始化默认展示第一张图片
    this.$refs.conimg.src =  this.ossurl + this.arrImg[0].picurl
    this.$nextTick(() => {
           setTimeout(() => {
               var el = document.querySelector('.contentop div.pinch-zoom');
           new PinchZoom(el, {});
           }, 100);
    });
},

</script>

这个图片的插件是作为子组件存在的，所以展示的图片是从父组件获取到的

如果需要展示多张图片，我是加了两个按键，上下张的切换，通过更换 按键来切换 this.$refs.conimg.src