div弹窗实现四角缩放功能(vue)

已于 2024-09-23 14:06:33 修改
阅读量786 收藏 1
点赞数 24
文章标签： vue.js 前端 javascript
于 2024-09-05 16:02:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jiaberrr/article/details/141932944
版权

最近项目中需要用到很多的可以收缩的弹窗，于是使用vue3做了一个通用组件，给大家分享一下，效果如下图，附源码。

实现思路：

1、弹窗上加4个角，用来拖拽缩放。

  <div class="resize-handle-tl resize-handle"></div>
  <div class="resize-handle-tr resize-handle"></div>
  <div class="resize-handle-bl resize-handle"></div>
  <div class="resize-handle-br resize-handle"></div>

2、设置4个角的样式以及绝对定位。

.resize-handle-br {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.resize-handle-bl {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  cursor: sw-resize;
}
.resize-handle-tl {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: nw-resize;
}
.resize-handle-tr {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: ne-resize;
}

3、监听4个角的鼠标拖拽事件实现缩放。

onMounted(() => {
  resizableBox = document.getElementById("resizable-box");
  resizeHandle = document.querySelectorAll(".resize-handle");
  resizeHandle.forEach((handle) => {
    handle.addEventListener("mousedown", function (e) {
      e.preventDefault();
      originalWidth = parseFloat(getComputedStyle(resizableBox).width);
      originalHeight = parseFloat(getComputedStyle(resizableBox).height);
      originalMouseX = e.clientX;
      originalMouseY = e.clientY;
      resizeType = this.className;
     
      window.addEventListener("mousemove", resize);
      window.addEventListener("mouseup", stopResize);
    });
  });
});

4、缩放核心代码：

let firstLeft = props.left; // 初始位置
let firstTop = props.top; // 初始位置
let firstBottom = props.bottom; // 初始位置
let firstRight = props.right // 初始位置
let lastTop = 0; // 上次移动距离
let lastLeft = 0; // 上次移动距离
let lastBottom = 0; // 上次移动距离
let lastRight = 0; // 上次移动距离
const resize = (e) => {
  const deltaX = e.clientX - originalMouseX;
  const deltaY = e.clientY - originalMouseY;
  resizableBox = document.getElementById("resizable-box");
  if (resizeType.includes("resize-handle-tl")) {
    if (resizableBox.style.left) {
      resizableBox.style.left = `${
        originalX + deltaX + lastLeft + firstLeft
      }px`;
      resizableBox.style.top = `${originalY + deltaY + lastTop + firstTop}px`;
    }
    resizableBox.style.width = `${originalWidth - deltaX}px`;
    resizableBox.style.height = `${originalHeight - deltaY}px`;
  } else if (resizeType.includes("resize-handle-tr")) {
    if(resizableBox.style.top) {
      resizableBox.style.top = `${originalY + deltaY + firstTop + lastTop}px`;
    }else {
      resizableBox.style.right = `${ originalX - deltaX + firstRight -lastRight}px`;
    }
    resizableBox.style.width = `${originalWidth + deltaX}px`;
    resizableBox.style.height = `${originalHeight - deltaY}px`;
   
  } else if (resizeType.includes("resize-handle-bl")) {
    if( resizableBox.style.left) {
      resizableBox.style.left = `${originalX + deltaX + firstLeft + lastLeft}px`;
    }else {
      resizableBox.style.bottom = `${originalY - deltaY + firstBottom - lastBottom}px`;
    }
    resizableBox.style.width = `${originalWidth - deltaX}px`;
    resizableBox.style.height = `${originalHeight + deltaY}px`;
   
  } else if (resizeType.includes("resize-handle-br")) {
    if(resizableBox.style.right) {
      resizableBox.style.right = `${ originalX - deltaX + firstRight -lastRight}px`;
      resizableBox.style.bottom = `${originalY - deltaY + firstBottom - lastBottom}px`;
    }
    resizableBox.style.width = `${originalWidth + deltaX}px`;
    resizableBox.style.height = `${originalHeight + deltaY}px`;
  }
};

const stopResize = (e) => {
  if(e.target.classList.contains('resize-handle-tl')) {
    lastTop += e.pageY - originalMouseY;
    lastLeft += e.pageX - originalMouseX;
  }else if(e.target.classList.contains('resize-handle-tr')) {
    lastTop += e.pageY - originalMouseY;
    lastRight += e.pageX - originalMouseX;
  }else if(e.target.classList.contains('resize-handle-bl')) {
    lastLeft += e.pageX - originalMouseX;
    lastBottom += e.pageY - originalMouseY
  }else if(e.target.classList.contains('resize-handle-br')) {
    lastBottom += e.pageY - originalMouseY
    lastRight += e.pageX - originalMouseX;
  }

  window.removeEventListener("mousemove", resize);
  window.removeEventListener("mouseup", stopResize);
};

完整代码如下：

components代码（pop-up.vue）

<template>
  <div class="pop-modal" @click.stop="closePop">
    <div
      id="resizable-box"
      class="popup-content"
      :style="{
        width: width,
        height: height,
        top: top + 'px',
        left: left + 'px',
        right: right + 'px',
        bottom: bottom + 'px',
      }"
      @click.stop="stopClose"
    >
      <div class="popup-container overflow-y-auto">
        <div class="popup-title ALIMAMA_SHUHEITI_BOLD relative flex align-center justif-between">
          <span>{{ title }}</span>
          <popUpIconVue class="r-0 t-0 h-p-40 w-20 mr-5"></popUpIconVue>
        </div>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%; overflow-y: auto"
        >
          <el-table-column prop="target" label="指标" />
          <el-table-column prop="unit" label="单位" width="120px" />
          <el-table-column prop="value" :label="yearLabel" />
          <el-table-column prop="speed" label="增长速度%" width="120px" />
        </el-table>
      </div>
      <div class="resize-handle-tl resize-handle"></div>
      <div class="resize-handle-tr resize-handle"></div>
      <div class="resize-handle-bl resize-handle"></div>
      <div class="resize-handle-br resize-handle"></div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, onMounted, defineEmits } from "vue";
import popUpIconVue from "../icons/popUpIcon.vue";
const emit = defineEmits(["close", "change"]);
const props = defineProps({
  width: {
    type: [Number, String],
    default: "38vw", // 默认宽度
  },
  height: {
    type: [Number, String],
    default: "41vh", // 默认高度
  },
  top: {
    type: Number,
    default: null,
  },
  left: {
    type: Number,
    default: null,
  },
  bottom: {
    type: Number,
    default: null,
  },
  right: {
    type: Number,
    default: null,
  },
  title: {
    type: String,
    default: "",
  },
  tableData: {
    type: Array,
    default: [],
  },
  yearLabel: {
    type: String,
    default: "2023年",
  }
});

let originalWidth = 0;
let originalHeight = 0;
let originalX = 0;
let originalY = 0;
let originalMouseX = 0;
let originalMouseY = 0;
let resizableBox = null;
let resizeHandle = [];
let resizeType = "";

onMounted(() => {
  resizableBox = document.getElementById("resizable-box");
  resizeHandle = document.querySelectorAll(".resize-handle");
  resizeHandle.forEach((handle) => {
    handle.addEventListener("mousedown", function (e) {
      e.preventDefault();
      originalWidth = parseFloat(getComputedStyle(resizableBox).width);
      originalHeight = parseFloat(getComputedStyle(resizableBox).height);
      originalMouseX = e.clientX;
      originalMouseY = e.clientY;
      resizeType = this.className;
     
      window.addEventListener("mousemove", resize);
      window.addEventListener("mouseup", stopResize);
    });
  });
});
let firstLeft = props.left;
let firstTop = props.top;
let firstBottom = props.bottom;
let firstRight = props.right
let lastTop = 0;
let lastLeft = 0;
let lastBottom = 0;
let lastRight = 0;
const resize = (e) => {
  const deltaX = e.clientX - originalMouseX;
  const deltaY = e.clientY - originalMouseY;
  resizableBox = document.getElementById("resizable-box");
  if (resizeType.includes("resize-handle-tl")) {
    if (resizableBox.style.left) {
      resizableBox.style.left = `${
        originalX + deltaX + lastLeft + firstLeft
      }px`;
      resizableBox.style.top = `${originalY + deltaY + lastTop + firstTop}px`;
    }
    resizableBox.style.width = `${originalWidth - deltaX}px`;
    resizableBox.style.height = `${originalHeight - deltaY}px`;
  } else if (resizeType.includes("resize-handle-tr")) {
    if(resizableBox.style.top) {
      resizableBox.style.top = `${originalY + deltaY + firstTop + lastTop}px`;
    }else {
      resizableBox.style.right = `${ originalX - deltaX + firstRight -lastRight}px`;
    }
    resizableBox.style.width = `${originalWidth + deltaX}px`;
    resizableBox.style.height = `${originalHeight - deltaY}px`;
   
  } else if (resizeType.includes("resize-handle-bl")) {
    if( resizableBox.style.left) {
      resizableBox.style.left = `${originalX + deltaX + firstLeft + lastLeft}px`;
    }else {
      resizableBox.style.bottom = `${originalY - deltaY + firstBottom - lastBottom}px`;
    }
    resizableBox.style.width = `${originalWidth - deltaX}px`;
    resizableBox.style.height = `${originalHeight + deltaY}px`;
   
  } else if (resizeType.includes("resize-handle-br")) {
    if(resizableBox.style.right) {
      resizableBox.style.right = `${ originalX - deltaX + firstRight -lastRight}px`;
      resizableBox.style.bottom = `${originalY - deltaY + firstBottom - lastBottom}px`;
    }
    resizableBox.style.width = `${originalWidth + deltaX}px`;
    resizableBox.style.height = `${originalHeight + deltaY}px`;
  }
};

const stopResize = (e) => {
  if(e.target.classList.contains('resize-handle-tl')) {
    lastTop += e.pageY - originalMouseY;
    lastLeft += e.pageX - originalMouseX;
  }else if(e.target.classList.contains('resize-handle-tr')) {
    lastTop += e.pageY - originalMouseY;
    lastRight += e.pageX - originalMouseX;
  }else if(e.target.classList.contains('resize-handle-bl')) {
    lastLeft += e.pageX - originalMouseX;
    lastBottom += e.pageY - originalMouseY
  }else if(e.target.classList.contains('resize-handle-br')) {
    lastBottom += e.pageY - originalMouseY
    lastRight += e.pageX - originalMouseX;
  }

  window.removeEventListener("mousemove", resize);
  window.removeEventListener("mouseup", stopResize);
};

const closePop = () => {
  emit('close');
};
const stopClose = () => {};
</script>

<style lang="scss" scoped>
.pop-modal {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
.popup-content {
  background: rgb(161, 177, 255);
  padding: 1rem;
  position: absolute;
  z-index: 1;
}
.popup-container {
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
}
.popup-title {
  background:linear-gradient(rgb(31,97,255),rgb(53,79,255), rgb(75,66,255),rgb(80,63,255));
  min-height: 9%;
  width: 100%;
  color: #fff;
  padding: 0 0 0 1rem;
  display: flex;
  align-items: center;
}
.resize-handle-br {
  width: 10px;
  height: 10px;
  //   background-color: #333;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.resize-handle-bl {
  width: 10px;
  height: 10px;
  //   background-color: #333;
  position: absolute;
  bottom: 0;
  left: 0;
  cursor: sw-resize;
}
.resize-handle-tl {
  width: 10px;
  height: 10px;
  //   background-color: #333;
  position: absolute;
  top: 0;
  left: 0;
  cursor: nw-resize;
}
.resize-handle-tr {
  width: 10px;
  height: 10px;
  //   background-color: #333;
  position: absolute;
  top: 0;
  right: 0;
  cursor: ne-resize;
}
</style>
<style>
.popup-content .el-table th.el-table__cell {
  background-color: rgb(236, 236, 255) !important;
  color: #000;
  font-family: "MiSans-Bold";
  font-size: 1.33rem;
}
.popup-content .el-table__body-wrapper .el-table__row .el-table__cell {
  background: #fff !important;
}
.popup-content .el-table__body-wrapper .el-table__row--striped .el-table__cell {
  background: rgb(236, 236, 255) !important;
}

.popup-content .el-table td.el-table__cell {
  border-bottom: none !important;
}
.popup-content .el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
.popup-content .el-table__inner-wrapper:before {
  background-color: #fff !important;
}
</style>

父组件中调用：

 <popUp
    v-if="popShow"
    :title="popTitle"
    :tableData="grossData"
    :top="top"
    :left="left"
    :right="right"
    :bottom="bottom"
	:yearLabel="yearLabel"
    @close="closePop"
  ></popUp>

Jiaberrr
关注
从零开始Vue项目中使用MapboxGL开发三维地图教程（四）改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中心点坐标
tigerhhzz的博客
06-14 1792
该功能使用mapbox gl draw绘制多边形，并使用Turf.js计算其面积（平方米）和中心点坐标。绘制最终顶点时双击以完成多边形。多边形的总面积将显示在地图的左上角。在地图上画一个多边形，并计算多边形中包含的面积和中心点坐标。要删除多边形并绘制新多边形，请使用地图右上角的绘制工具。单击地图上的点来创建线，使用turf测量线的长度距离。这里我们使用到turfjs库，安装并引入turf。单击地图开始绘制多边形。
vue实现拖拽边框改变元素宽度
weixin_42936768的博客
10-09 1444
如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。如果没有设置position，元素找不到。建立一个父子节点，父级元素必须是定位元素，设置样式如下。：设置鼠标捕获(之后的事件捕获会作用在当前元素上)代表距离当前元素最近的。
vue进阶：使用插件实现弹窗类组件
weixin_43867717的博客
03-14 1935
在之前的文章里，已经分析了怎么实现弹窗类组件，并且介绍了两种实现弹窗类组件的方式，分别是借助Vue构造函数和Vue的extend函数。想了解的可以先看我之前的文章：vue进阶：弹窗类组件实现方式 插件 插件是嘛? 插件通常用来为 Vue 添加全局功能。我们vue项目中最常用的插件就是vue-router。 vue插件和组件的诞生都是为了实现逻辑的复用，他们的本质都是对代码逻辑的封装，所以在一定程度上，组件可以封装成插件，插件也可以改写成组件。具体使用插件还是组件就要看项目中的实际使用场景了。Vue 插件和V
vue放大缩小div
奋斗的蜗牛
09-22 5113
<span @click="narrow()"> <svg class="fulls-iconfont" aria-hidden="true"> <use xlink:href="#bi-cancel-full-screen"></use> </svg> </span> <span @click="enlarge()"> <svg class="fulls..
【Vue】使用Vue实现div收缩效果
热门推荐
MicroAnswer的博客
09-10 1万+
重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。 本文原文地址：Microanswer的博客【Vue】使用Vue实现div收缩效果。 一、效果展示 你看到的边框只是为了演示效果需要，实际组件是不会有任何内容的，它只提供收缩功能。此处内容可以是任何内容，组件会自动根据内容高度进行展开，需要用户关心的是否开还是关的状态。开发者也只需关心此状态，故此可以放心...
Vue-div横向/纵向拖拽自由缩放
龘
07-28 1365
代码】Vue-div横向/纵向拖拽自由缩放。
vue放大缩小div_Vue.js+14行代码----实现图片的放大缩小
weixin_39633252的博客
12-29 244
前言最近有个需求，说系统上图片太小啦，有些图片看不清，so马上来做。实现效果CSSimg {transform: scale(1); /*图片原始大小1倍*/transition: all ease 0.5s; } /*图片放大所用时间*/img.scale {transform: scale(2); /*图片需要放大2倍*/position: relativ...
使用vue和element-ui 实现：页面有4个el-tab和一个弹窗，4个el-tab写假数据，然后弹窗实现三个功能：1可以拖拽；2可以边框和四角实现放大和缩；3点击4个el-tab不影响他。
05-30
以上代码使用了Element UI组件库中的Tabs和Dialog组件，并且使用了Vue的响应式数据和事件处理函数来实现弹出框的拖拽和缩放功能。同时，弹出框的z-index设置为1000，可以保证它在其他页面元素之上。点击4个el-tab...
请使用 vue和element-ui js mouseevent事件 实现弹窗 的四个角和四条边进行放大缩小，其他属性有 v-dialogDrag， :modal="false"， :close-on-click-modal="false"，弹窗默认显示，请用具体代码实现
05-30
具体地，我们在弹窗的四个角和四条边添加了可拖拽的缩放手柄，并在鼠标按下时监听 `mousedown` 事件，记录下当前的位置信息和弹窗的尺寸，然后在鼠标移动时根据手柄的位置和拖拽的距离计算出新的尺寸和位置，并更新...
一个页面多图表展示（四个div的方式）
09-19 1134
效果如图所示，一个页面四个div，每个div里面展示相应的数据，因为这种效果会有点麻烦，而且不太雅观我就换了一种写法，一个div里面用四个图表，共用一个图例，先放上这个方式的效果图和源码，后期会再发布一篇文章用来展示新的效果 <!-- 产能 产量 开工率 仓储 --> <!DOCTYPE html> <html lang="...
vue draggable resizable 实现可拖拽缩放的组件功能
10-16
主要介绍了vue draggable resizable 实现可拖拽缩放的组件功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue使用arcgis加载地图 实现针对后台接口返回的坐标，在地图上标相对应的点
xxz2645746142的博客
09-25 3455
vue使用arcgis加载地图 实现针对后台接口返回的坐标，在地图上标相对应的点 1.运行命令 npm install --save esri-loader 2.根据需求引入自己需要的模板，相关模板可以去官网有详细的，这里主要用到了 a.加载地图 需要一个模板 可以很具自己的需求用2D 或者3D地图 c.点击地图上某点出现弹框 （popupTemplate）官网给出了弹框的四种形式 具体可以参考 ...
Vue 页面自动缩放
最新发布
那人那事的博客
09-10 421
本文主要介绍如何使用Vue框架实现页面的自动缩放。
Vue 自定义 拉伸指令
m0_73429984的博客
07-06 668
在前端开发中，常常需要动态控制组件的长宽。其中拖拽控制是一个控制元素长宽很好的方式。本文将很好的介绍，拖拽控制元素大小的方式。本文介绍了，如何给元素添加拖拽放大/缩小效果，并制作为 Vue指令。希望对大家有帮助。
vue放大缩小div_vue 左右拖动div改变其宽度
weixin_39824898的博客
12-19 927
div拖动body,html {margin: 0;padding: 0;height: 100%;}#box {width: 100vw;height: 100vh;overflow: hidden;}#left {width: calc(30% - 5px);height: 100%;background: #8000FF;float: left;}#resize {width: 5px;he...
原生js、vue超强拖动伸缩插件vue-draggable-resizable实现拖动div窗口功能实现
神经彬的博客
10-29 4792
<div :style="dialogHeight" class="pathfind dialog" ref="dialogRef" v-show="visible.isShow" @mousedown="mouseDownHandleelse($event)" @mouseup="mouseUpHandleelse($event)"> // 内容 </div> <script> export default { methods: { ...
一个类似浏览器窗口，可以放大缩小的窗口Vue组件
03-20 574
这样一个可以做到和浏览器一样各种放大缩小，随意拖动的窗口vue组件，直接上代码。直接将这个vue窗口组件用import 加入到你的vue组件里就可以使用。
VUE通过托拽div边框实现改变div大小
为人民服务
10-25 1836
VUE通过托拽div边框实现改变div大小
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值