目标效果：
QQ录屏0629172545
鼠标滚轮向上转动图片放大；鼠标滚轮向下转动图片缩小；用鼠标点击图片可移动
知识点：
1.实现拖拽有两种方法，第一种是drag相关函数，第二种是mouse相关函数，这种方法的差别与选择尚不清楚，这里用的是mouse相关函数
2.拖拽函数和mouse相关函数会互相影响，要实现拖拽需要设置元素draggable="false"
3.大致解决思路是这样的：
element.onmousedown{
document.onmousemove()
element.onmouseup{
document.removemousemove()
}
}
具体实现代码如下：
<!--定义要实现拖拽功能的元素。高度和宽度择其一进行设置，否则图片会变形；zoom属性用来实现图片的放大缩小；transform.translate属性用来实现图片的移动--><img :style="{'zoom':zoom,'height':'800px','transform':'translate('+x+'px,'+y+'px)'}" draggable="false" @mousewheel="change_img($event)" @mousedown="mousedown($event)" id="pic"><button @click="closePic"></button>export default({data(){return{//定义相关变量，zoom记录图片缩放值；x/y记录图片平移值；startx/starty记录点击鼠标的位置；endx/endy记录松开鼠标的位置 zoom:1,x:0,y:0,startx:'',starty:'',endx:0,endy:0,}}，method:{ //鼠标滚轮转动时执行函数，获取delta，根据数值的正负判断鼠标滚轮转动的方向，以此改变zoom，实现放大或者缩小图片的效果change_img(e){if(e.deltaY<0)this.zoom++elsethis.zoom--},//用mousedown/mousemove/mouseup事件实现鼠标拖拽图片移动效果mousedown(e){// 绑定mousemovethis.startx=e.pageX; this.starty=e.pageYdocument.addEventListener('mousemove',this.mousemove)document.getElementById('pic').addEventListener('mouseup',this.mouseup)},mousemove(e){this.x=e.pageX-this.startx+this.endxthis.y=e.pageY-this.starty+this.endy},mouseup(){// 解除绑定mousemovedocument.removeEventListener('mousemove',this.mousemove,false)this.endx=this.xthis.endy=this.y},//点击按钮让图片恢复初始状态closePic(){this.x=0this.y=0this.zoom=1this.endx=0this.endy=0}}})
