vue3 通过 Vue3DraggableResizable实现拖拽弹窗，可修改大小

先看效果

20250926_084416

以下代码是vue3的写法

1.安装依赖

javascript 复制代码

 npm install vue3-draggable-resizable --save

2.页面代码

javascript 复制代码

<script setup>
import {ref} from "vue";
import Vue3DraggableResizable from "vue3-draggable-resizable";
const x = ref(120);  // 初始X坐标（距离页面左侧的像素值）
const y = ref(20);  // 初始Y坐标（距离页面顶部的像素值）

const initW = ref(1510)
const initH = ref(770)
const originalSize = ref({ width: 1510, height: 770 })
const isAmplified = ref(false)
const originalPosition = ref({ x: 50, y: 50 })
const currentWidth = ref(1510); // 当前宽度
const currentHeight = ref(770); // 当前高度+
const audit = ref(true)
const amplification = ()=>{
  if (!isAmplified.value) {
    // 第一次点击 - 放大到左上角(0,0)
    // 保存当前位置和尺寸，用于恢复
    originalPosition.value = {
      x: x.value,
      y: y.value
    };
    originalSize.value = {
      width: currentWidth.value,
      height: currentHeight.value
    };

    // 放大到左上角，宽度设为窗口的95%（可根据需要调整比例）
    x.value = 0;
    y.value = 0;
    currentWidth.value = Math.floor(window.innerWidth * 0.97);
    currentHeight.value = Math.floor(window.innerHeight * 0.9);
  } else {
    // 第二次点击 - 恢复到之前的大小和位置
    x.value = originalPosition.value.x;
    y.value = originalPosition.value.y;
    currentWidth.value = originalSize.value.width;
    currentHeight.value = originalSize.value.height;
  }

  // 切换状态标记
  isAmplified.value = !isAmplified.value;
}

const auditFun = () =>{
  audit.value = false
}

const print = (val) =>{
  console.log(val)
}
</script>

<template>
  <Vue3DraggableResizable
      :initW="initW"
      :initH="initH"
      v-model:x="x"
      v-model:y="y"
      v-if="audit"
      class="Vue3DraggableResizable"
      :draggable="true"
      v-model:w="currentWidth"
      v-model:h="currentHeight"
      :resizable="true"
      @activated="print('activated')"
      @deactivated="print('deactivated')"
      @drag-start="print('drag-start')"
      @resize-start="print('resize-start')"
      @dragging="print('dragging')"
      @resizing="print('resizing')"
      @drag-end="print('drag-end')"
      @resize-end="print('resize-end')"
  >
    <div style="display: flex;justify-content: flex-end;align-items: center">
      <svg @click.stop="amplification" t="1758784881397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10496" width="25" height="25"><path d="M768 170.666667H256c-46.933333 0-85.333333 38.4-85.333333 85.333333v512c0 46.933333 38.4 85.333333 85.333333 85.333333h512c46.933333 0 85.333333-38.4 85.333333-85.333333V256c0-46.933333-38.4-85.333333-85.333333-85.333333zM256 768V256h512v512H256z" fill="#515151" p-id="10497"></path></svg>
      <svg @click.stop = 'auditFun' style="margin: 20px;cursor: pointer" t="1758772119424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9473" width="20" height="20"><path d="M555.4 512l304.6-304.6c4.8-4.8 4.8-12.6 0-17.4l-26-26c-4.8-4.8-12.6-4.8-17.4 0L512 468.6 207.4 164c-4.8-4.8-12.6-4.8-17.4 0l-26 26c-4.8 4.8-4.8 12.6 0 17.4L468.6 512 164 816.6c-4.8 4.8-4.8 12.6 0 17.4l26 26c4.8 4.8 12.6 4.8 17.4 0L512 555.4l304.6 304.6c4.8 4.8 12.6 4.8 17.4 0l26-26c4.8-4.8 4.8-12.6 0-17.4L555.4 512z" fill="#272636" p-id="9474"></path></svg>
    </div>
    <div style="padding: 0 20px 20px;
        height: calc(100% - 60px);
        overflow: auto;
        box-sizing: border-box;">
      内容
    </div>
  </Vue3DraggableResizable>

</template>

<style  lang="scss">
.Vue3DraggableResizable{
  border-radius: 10px;
  position: absolute;
  z-index: 9999;
  top:0;
  background: #FFFFFF;
}
.Vue3DraggableResizableBox{
  width: 100%;
  height: 100%;
  position: absolute;

  z-index: 999;
  background: rgba(107, 107, 107, 0.33) !important;
}
.vdr-handle-ml,.vdr-handle-mr{
  height: 95%;
  opacity: 0;
  top: 3% !important;
}
.vdr-handle-tl,.vdr-handle-bl,.vdr-handle-tr,.vdr-handle-br{
  width: 20px;
  opacity: 0;
  height: 20px;
}
.vdr-container.active{
  border-color:transparent;
}
.vdr-handle-tm,.vdr-handle-bm{
  left: 1.1%;
  width: 98%;
  opacity: 0;
}

.Vue3DraggableResizable:hover .handle {
  background-color: rgba(0, 120, 255, 0.3);
}
</style>