Vue.js+jQuery.js实现图片的放大缩小及拖拽

工作项目中，使用vue.js+require.js还有少量的JQuery.js组成的前端JS环境，样式用的element-ui，工作需求是要对APP端传到PC端页面的十几张甚至几十张图片进行显示，且与OCR识别图片中的信息进行人工比对，这就需要PC端的工作人员细致的查看图片，要支持在指定的div中图片可放大、缩小、可拖动

所需JS：
Vue.js
jQuery.js
jQuery-browser.js
jQuery.imageView.js

编辑html

<!--用下面一个DIV片段作为说明 -->

<!--div样式高、宽、边框样式可自行修改；mousedown事件是鼠标左键按下按住事件 -->

<div id="sfzGhImageDiv" @mousedown="mousedown('sfzGhImageDiv')"  style="overflow: hidden; position: relative; width: 570px; height: 300px;border:1px solid #000;">

<template slot-scope="scope">

<!--img样式高、宽、边框样式可自行修改，需与div的大小一致；mousewheel是滚轮滚动事件，event参数可以传递滚轮滚动事件的一些参数（注意：好像火狐浏览器这个事件名） -->

<img id="sfzGhImage" @mousewheel="imgToSize(sfzGhImage,event)" :src=OCRModel.OCRSfzURL_ZM alt="身份证正面图片（国徽面）" style="cursor: move; visibility: visible; position: absolute; width: 570px; height: 300px;">

</template>

</div>

引入JS，JS的引入路径依个人

<!-- 引入以下的jQuery相关的JS，为了OCR图片放大缩小鼠标拖动功能 -->

<script src="../js/jquery/jquery-1.10.2.js"></script>

<script src="../js/jquery/jquery.imageView.js"></script>

<script src="../js/jquery/jquery-browser.js"></script>

在Vue的methods标签内写function方法

//OCR图片放大缩小功能(所有图片div通用，通过jQuery的id绑定操作)

"imgToSize" : function(imgId,event) {

//通过这个值与零的大小比较，可以知道鼠标的滚轮滚动的方向

var deltaY = event.deltaY;

var size = 0;

if(deltaY > 0){

   size = -100;

}else if(deltaY < 0){

   size = 100;

}

var img = $("#"+imgId.id);

//取得图片的实际宽度

var oWidth = img.width();

//取得图片的实际高度

var oHeight = img.height(); 

//赋予改变后的值

img.width(oWidth + size);

img.height(oHeight + size / oWidth * oHeight);

},

 //鼠标左键按下，拖动照片事件(所有图片div通用，通过jQuery的id绑定操作)

"mousedown" : function(id){

//width: 570, height: 300,需与div的大小一致

$("#"+id).imageView({ width: 570, height: 300 });

}

在这过程中，还遇到一个问题：就是当需要显示图片很多，按顺序排下来远远超过了屏幕的宽度，当你想对某一张图片鼠标滚轮放大缩小操作的时候，整个页面也会跟着上下动，好烦人，怎么办呢？

把鼠标的光标放在图片上，按住shift键，再滑动鼠标，你会发现，页面不动了，只是光标下方的图片在被放大、缩小！··~~··！

不足之处，欢迎指正！