vue项目图片实现滚轮缩放（支持火狐浏览器）

网上有很多使用event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom的方法，但是我发现火狐浏览器并不支持该方法，因此更新本文章。
让我们先来看看效果：

废话不多说，直接上干货！

• 首先html写法：div包含图片标签。@DOMMouseScroll.prevent为火狐支持的鼠标滚动监听。@mousedown为鼠标离开和放上。

 <div style="margin-top: 10px;  width: 100%" class="left" @DOMMouseScroll.prevent="rollImg">
    <img src="./第1页.jpg" class="img" ref="imgDiv" @mousedown="move" />
 </div>

• 添加css样式：

.left {
  position: absolute;
  width: 360px;
  height: 460px;
  background-color: #fff;
  padding: 20px;
  float: left;
  overflow: hidden;
}
.img {
  position: absolute;
  top: 5px;
  left: 7px;
  max-width: 923px;
  max-height: 460px;
  cursor: move;
}

• data中定义zoomD变量作为图片最初大小的比例：

  data() {
    return {
      zoomD: 100,  
  },

• 在methods:钩子中定义函数：

   move(e){
      e.preventDefault();
      // 获取元素
      var left = document.querySelector(".left");
      var img = document.querySelector(".img");
      var x = e.pageX - img.offsetLeft;
      var y = e.pageY - img.offsetTop;

      // 添加鼠标移动事件
      left.addEventListener("mousemove", move);
      function move(e) {
        img.style.left = e.pageX - x + "px";
        img.style.top = e.pageY - y + "px";
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", function () {
        left.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      left.addEventListener("mouseout", function () {
        left.removeEventListener("mousemove", move);
      });
   },
    // 缩放图片
    rollImg() {
      /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100，原图大小 */
      if (this.zoomD <= 50) {
        this.zoomD = 50;
      }
      var zoom = this.zoomD + (event.detail * 40) / 12;
      /*根据修改transform 改变图片缩放大小 */
      this.$refs.imgDiv.style.transform = "scale(" + zoom / 100 + ")";  
      this.zoomD = zoom;
    },

至此结束。

标签：vue,鼠标,img,缩放,move,火狐,zoomD,left
来源： https://blog.csdn.net/qq_41859063/article/details/122298422