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

目标效果：

鼠标滚轮向上转动图片放大；鼠标滚轮向下转动图片缩小；用鼠标点击图片可移动

知识点：

1.实现拖拽有两种方法，第一种是drag相关函数，第二种是mouse相关函数，这种方法的差别与选择尚不清楚，这里用的是mouse相关函数

2.拖拽函数和mouse相关函数会互相影响，要实现拖拽需要设置元素draggable="false"

3.大致解决思路是这样的：

element.onmousedown{

        document.onmousemove()

        element.onmouseup{

                document.removemousemove()

        }

}
 

具体实现代码如下：

1.  
   <!--定义要实现拖拽功能的元素。高度和宽度择其一进行设置，否则图片会变形；zoom属性用来实现图片的放大缩小；transform.translate属性用来实现图片的移动-->
2.  
    
3.  
   <img :style="{'zoom':zoom,'height':'800px','transform':'translate(' x 'px,' y 'px)'}" draggable="false" @mousewheel="change_img($event)" @mousedown="mousedown($event)" id="pic">
4.  
    
5.  
   <button @click="closePic"></button>
6.  
    
7.  
   export default({
8.  
    
9.  
           data(){
10.  
     
11.  
                    return{ 
12.  
     
13.  
                            //定义相关变量，zoom记录图片缩放值；x/y记录图片平移值；startx/starty记录点击鼠标的位置；endx/endy记录松开鼠标的位置         
14.  
     
15.  
                            zoom:1,
16.  
     
17.  
                            x:0,
18.  
     
19.  
                            y:0,
20.  
     
21.  
                            startx:'',
22.  
     
23.  
                            starty:'',
24.  
     
25.  
                            endx:0,
26.  
     
27.  
                            endy:0,
28.  
     
29.  
                    }
30.  
     
31.  
            }，
32.  
     
33.  
            method:{          
34.  
     
35.  
                    //鼠标滚轮转动时执行函数，获取delta，根据数值的正负判断鼠标滚轮转动的方向，以此改变zoom，实现放大或者缩小图片的效果
36.  
     
37.  
                    change_img(e){
38.  
     
39.  
                          if(e.deltaY<0)
40.  
     
41.  
                                  this.zoom
42.  
     
43.  
                          else
44.  
     
45.  
                                  this.zoom--
46.  
     
47.  
                   },
48.  
     
49.  
                  //用mousedown/mousemove/mouseup事件实现鼠标拖拽图片移动效果
50.  
     
51.  
                   mousedown(e){
52.  
     
53.  
                          // 绑定mousemove
54.  
     
55.  
                          this.startx=e.pageX; this.starty=e.pageY
56.  
     
57.  
                          document.addEventListener('mousemove',this.mousemove)
58.  
     
59.  
                          document.getElementById('pic').addEventListener('mouseup',this.mouseup)
60.  
     
61.  
                  },
62.  
     
63.  
                  mousemove(e){
64.  
     
65.  
                          this.x=e.pageX-this.startx this.endx
66.  
     
67.  
                          this.y=e.pageY-this.starty this.endy
68.  
     
69.  
                  },
70.  
     
71.  
                  mouseup(){
72.  
     
73.  
                          // 解除绑定mousemove
74.  
     
75.  
                          document.removeEventListener('mousemove',this.mousemove,false)
76.  
     
77.  
                          this.endx=this.x
78.  
     
79.  
                          this.endy=this.y
80.  
     
81.  
                  },
82.  
     
83.  
                  //点击按钮让图片恢复初始状态
84.  
     
85.  
                  closePic(){
86.  
     
87.  
                          this.x=0
88.  
     
89.  
                          this.y=0
90.  
     
91.  
                          this.zoom=1
92.  
     
93.  
                          this.endx=0
94.  
     
95.  
                          this.endy=0
96.  
     
97.  
                  }
98.  
     
99.  
            }
100.  
      
101.  
     })

这篇好文章是转载于：学新通技术网