vue3.0 TS 图片能在容器内随意移动并且能缩放

造梦者FZ

已于 2023-05-30 16:50:25 修改

阅读量710

点赞数 1

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2022-09-24 18:32:13 首次发布

本文链接：https://blog.csdn.net/qq_43923146/article/details/127028998

版权

Vue3.0 图片移动图片缩放 DOM操作鼠标事件

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

vue3.0图片在容器内随意移动并且能缩放

话不多说，先上效果：

<div class="content">
    <div class="left">
      <div class="imag" @mousewheel.prevent="rollImg">
        <img @mousedown="move" :src="leftSrc" class='first' :style="{transform: `scale(${zoom})`,left:`0px`,top:`0px`}">
      </div>
    </div>
    <div class="right">
      <div class="imag">
        <img  :src="rightSrc" class='first' :style="{transform: `scale(${zoom})`,left:`${0}px`,top:`${0}px`}">
      </div>
    </div>
   </div>

.imag{
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      border: 1px solid gray;
      overflow: hidden;
    }
    .first {
      position: absolute;
      top: 0;
      left: 0;
     width: 100%;
     height: 100%;
      cursor: move;
    }
    .left{
      width: 49%;
      height: 90%;
      
    }
    .right{
      width: 49%;
      height: 90%;
    }

  const zoom = ref<any>(1.1);
	const leftSrc=ref<string>(''); 
  const rightSrc=ref<string>(''); 
// 移动图片
   function move(e:any) {
    e.preventDefault()
    // 获取元素
    let left = document.querySelector('.imag') as HTMLElement
    let img:any = document.querySelector('.first')
    let imgs:any = document.querySelectorAll('.first')
    let x = e.pageX - img.offsetLeft
    let y = e.pageY - img.offsetTop
    // 添加鼠标移动事件
    left.addEventListener('mousemove', move)
    function move(e:any) {
      imgs.forEach((i:any)=>{
          i.style.left = e.pageX - x + 'px';
          i.style.top = e.pageY - y + 'px';
      })
    }
    // 添加鼠标抬起事件，鼠标抬起，将事件移除
    img.addEventListener('mouseup', function() {
        left.removeEventListener('mousemove', move)
    })
    // 鼠标离开父级元素，把事件移除
    left.addEventListener('mouseout', function() {
        left.removeEventListener('mousemove', move)
    })
  }
   // 缩放图片
   function rollImg(e:any) { 
    //  console.log(5454,e)
    /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */ 
    let Zoom:any = zoom.value
    /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */ 
    Zoom += e.wheelDelta / 1200;
    /* 最小范围 和 最大范围 的图片缩放尺度 */ 
    if (Zoom >= 0.1 && Zoom <100) { 
      zoom.value=Zoom
    }
    console.log('缩放图片',e.wheelDelta,Zoom);
    return false; 
  }