Vue.js结合jQuery.js实现在指定区域内图片鼠标滚轮控制放大缩小、左键按住实现拖拽以及左键双击旋转效果

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

编辑html（style样式应格外注意一下）

用下面一个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参数可以传递滚轮滚动事件的一些参数（注意：好像火狐浏览器这个事件名）；dblclick是鼠标双击事件 -->
<img id="sfzGhImage" @mousewheel="imgToSize(sfzGhImage,event)" @dblclick="imgRotateRight(xingshizhengImage)" :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 });
}
	
//图片向右旋转90度
//注意：imgRotate是要定义在方法之外的全局变量，这样每次点击才会产生累加效果！！！！
"imgRotateRight" : function(imgId){
	var img = $("#"+imgId.id);
	imgRotate += 90;
	img.css('transform', 'rotate(' + imgRotate + 'deg)');
 }

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

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

<<<<<<<<<<<<<<<<<<<<<<<<<<<<
解决问题过程中，通过网上查阅，得到了一些前辈的博客文章的指点，帮助解决了问题，再次感谢，并把最有帮助的文章引用至此：
div内部实现图片旋转、放大、缩小、拖拽
JavaScript图片的放大缩小及拖拽

不足或有误之处，欢迎批评指正！