最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

焦点快播：【Vue】vue3 元素在某区域内缩放拖拽

来源：博客园


【资料图】

示例

代码（逻辑请看注释）

<script setup lang="ts">import { ref, reactive } from "vue";const boxRefs = ref(null);const wapperRefs = ref(null);const dragData = reactive({  x: 0, // 拖拽初始化时的x坐标  y: 0, // 拖拽初始化时的y坐标  left: 0, // 拖拽结束时的x偏移量  top: 0, // 拖拽结束时的y偏移量});const scaleData = reactive({  scale: 1,  scaleNum: 0.1, // 缩放比例  scaleMax: 100, // 最大缩放比例  scaleMin: 0, // 最小缩放比例});// 拖拽function dragstart(e: MouseEvent) {  e.preventDefault(); // 阻止默认事件  // const wapper: any = document.querySelector(".wapper");  // const box: any = document.querySelector(".box");  const box = boxRefs.value as HTMLElement;  const wapper = wapperRefs.value as HTMLElement;  dragData.x = e.pageX - box.offsetLeft;  dragData.y = e.pageY - box.offsetTop;  // 添加鼠标移动事件  wapper.addEventListener("mousemove", move);  function move(event: any) {    // 计算元素的位置    dragData.left = event.pageX - dragData.x;    dragData.top = event.pageY - dragData.y;    // 边界判断可以在这里添加 ↓    // 设置元素的位置    box.style.left = dragData.left + "px";    box.style.top = dragData.top + "px";  }  // 添加鼠标抬起事件，鼠标抬起，将事件移除  box.addEventListener("mouseup", function () {    wapper.removeEventListener("mousemove", move);  });  // 鼠标离开父级元素，把事件移除  box.addEventListener("mouseout", function () {    wapper.removeEventListener("mousemove", move);  });}// 缩放function scale(e: WheelEvent) {  // 100 鼠标向下滚动缩小 -100 向上滚动放大  if (e.deltaY === 100) {    scaleData.scale -= scaleData.scaleNum;  } else {    scaleData.scale += scaleData.scaleNum;  }  // 边界判断  if (scaleData.scale >= scaleData.scaleMax) {    scaleData.scale = scaleData.scaleMax;    return;  }  if (scaleData.scale <= scaleData.scaleMin) {    scaleData.scale = scaleData.scaleMin;    return;  }  boxRefs.value!.style.transform = `translate(-50%, -50%) scale(${scaleData.scale})`;  return false;}</script>

参考博客

手把手教你学会用vue实现元素拖拽移动+滚轮缩放功能vue项目中鼠标滚轮缩放图片大小和拖拽效果

关键词： 缩放比例 鼠标抬起 缩放图片