vue 图片拖拽和滚轮缩放

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

这里注意如果自己的页面有滚动条，一定阻止滚动事件的默认行为，否则缩放图片的时候，页面会跟着滚动
@mousewheel.prevent 阻止默认行为

<div ref="imgWrap" @mousewheel.prevent="rollImg" class="modal-img-wrap">
　　<img ref="img" :src="fullscreenImgSrc" @mousedown="moveImg" alt="大图" class="modal-img"/>
</div>

　　javascript

    moveImg (e) {
      e.preventDefault()
      // 获取元素
      let imgWrap = this.$refs.imgWrap
      let img = this.$refs.img
      let x = e.pageX - img.offsetLeft
      let y = e.pageY - img.offsetTop
      // 添加鼠标移动事件
      imgWrap.addEventListener('mousemove', move)
      function move (e) {
        img.style.left = e.pageX - x + 'px'
        img.style.top = e.pageY - y + 'px'
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener('mouseup', () => {
        imgWrap.removeEventListener('mousemove', move)
      })
      // 鼠标离开父级元素，把事件移除
      imgWrap.addEventListener('mouseout', () => {
        imgWrap.removeEventListener('mousemove', move)
      })
    },
    rollImg () {
      /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
      let zoom = parseInt(this.$refs.img.style.zoom) || 100
      /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
      zoom += event.wheelDelta / 12
      /* 最小范围 和 最大范围 的图片缩放尺度 */
      if (zoom >= 80 && zoom < 500) {
        this.$refs.img.style.zoom = zoom + '%'
      }
      return false
    }

less

    .modal-img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        cursor: move;
        &-wrap {
          position: relative;
          width: 960px;
          height: 560px;
          overflow: hidden;
        }
      }

　　参考: vue实现鼠标滚轮滚动缩放图片，对图片进行拖拽

以上是 vue 图片拖拽和滚轮缩放 的全部内容， 来源链接： utcz.com/z/379856.html

回到顶部