vue实现图片放大缩小及拖拽

目标效果：

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

              }

        }

})