高支模图片放大缩小

src/views/projectFront/highModulus/planConfig.vue

@@ -48,7 +48,7 @@
             </div>
             <div style="height: 100%" ref="mapbox">
             <vue-scroll style="height:calc(100% - 30px);">
-              <div class="img-box" :style="{'width': imgWidth + 'px', height: imgHeight + 'px', transform: 'scale(' + imgZoom +')'}">
+              <div class="img-box" @mousewheel.prevent="rollImg"  :style="{'width': imgWidth + 'px', height: imgHeight + 'px', transform: 'scale(' + imgZoom +')'}">
                 <img ref="map"  v-if="activeImgUrl"  style="border: 1px solid #eee;" :style="{'width': imgWidth + 'px', height: imgHeight + 'px'}" :src="activeImgUrl"/>
                 <ul class="point-list" v-if="activeImgUrl">
                   <li v-for="(item,index) in pointList" :key="index" :ref="'point'+index" :style="{'top': item.mapY + 'px', 'left': item.mapX + 'px', 'display': item.status, 'transform': 'scale(' + 1/imgZoom +')'+ ' ' + item.transform}" >
@@ -447,13 +447,28 @@ export default {
         },
         changeImgSize(val){
              if(val == 1){
-                this.imgZoom = this.imgZoom + 0.5
+                this.imgZoom = this.imgZoom + 0.2
                 console.log(this.imgZoom)
             }else if(val == 2){
                 this.imgZoom = (this.imgZoom - 0.5) <= 0 ? this.imgZoom:this.imgZoom - 0.5
                 console.log(this.imgZoom)
             }
         },
+     
+
+         // 缩放图片
+        rollImg() { 
+        /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */ 
+        var zoom = parseInt(this.$refs.map.style.zoom) || 100; 
+        /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */ 
+        zoom += event.wheelDelta / 12;
+            /* 最小范围 和 最大范围 的图片缩放尺度 */ 
+            if (zoom >= 80 && zoom <500) { 
+            this.$refs.map.style.zoom = zoom + "%"; 
+            }
+            return false; 
+        },
+
         // 添加鼠标监听事件
         move(val,e){
             console.log(val,e.pageX,e.pageY)
@@ -737,4 +752,7 @@ export default {
 .pointFixed{
   position: fixed;
 }
+
+
+
 </style>