vue3 通过 Vue3DraggableResizable实现拖拽弹窗，可修改大小
先看效果
20250926_084416
以下代码是vue3的写法
1.安装依赖
npm install vue3-draggable-resizable --save2.页面代码
<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>