使用Vue3DraggableResizable组件实现拖拽拉伸

1：安装

yarn add vue3-draggable-resizable 或者npm install vue3-draggable-resizable

2：全局注册或者按需引入

//main.js
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'createApp(App).use(Vue3DraggableResizable).mount('#app')单页面组件里使用
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'import { DraggableContainer } from 'vue3-draggable-resizable';//需要限制范围时添加
这里是需要多个单独的拖拽且限制拖拽范围const handleDragClick = e => {console.log(e, '事件');
};<div class="parent-wrap"><DraggableContainer :referenceLineColor="'white'"><Vue3DraggableResizablev-for="(item, index) in list":key="index":initW="310":initH="420"v-model:x="item.x"v-model:y="item.y"v-model:w="item.w"v-model:h="item.h"v-model:active="item.active":draggable="true":resizable="true":parent="true":minW="420":minH="310"classNameDraggable="draggable-wrap"@activated="handleDragClick('activated')"@deactivated="handleDragClick('deactivated')"@drag-start="handleDragClick('drag-start')"@resize-start="handleDragClick('resize-start')"@dragging="handleDragClick('dragging')"@resizing="handleDragClick('resizing')"@drag-end="handleDragClick('drag-end')"@resize-end="handleDragClick('resize-end')">///需要拖拽拉伸的组件内容<custom-components></custom-components></Vue3DraggableResizable></DraggableContainer></div>//自定义样式
.parent-wrap {position: absolute;width: 100%;height: 800px;top: 0px;left: 0px;user-select: none;overflow: hidden;
//隐藏边框和按钮.draggable-wrap.vdr-container.active {border: none;:deep(.vdr-handle) {opacity: 0;}}
}

官方使用案例

https://classic.yarnpkg.com/en/package/vue3-draggable-resizable