目标效果：
QQ录屏20230629172545
鼠标滚轮向上转动图片放大；鼠标滚轮向下转动图片缩小；用鼠标点击图片可移动
知识点：
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++
else
this.zoom--
},
//用mousedown/mousemove/mouseup事件实现鼠标拖拽图片移动效果
mousedown(e){
// 绑定mousemove
this.startx=e.pageX; this.starty=e.pageY
document.addEventListener('mousemove',this.mousemove)
document.getElementById('pic').addEventListener('mouseup',this.mouseup)
},
mousemove(e){
this.x=e.pageX-this.startx+this.endx
this.y=e.pageY-this.starty+this.endy
},
mouseup(){
// 解除绑定mousemove
document.removeEventListener('mousemove',this.mousemove,false)
this.endx=this.x
this.endy=this.y
},
//点击按钮让图片恢复初始状态
closePic(){
this.x=0
this.y=0
this.zoom=1
this.endx=0
this.endy=0
}
}
})