Vue.js中结合jQuery.js实现在指定区域内图片的放大缩小、拖拽及旋转

本文链接：https://blog.csdn.net/chulaizhadao521147/article/details/84564889

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是滚轮滚动事件，