使用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'">
      <Vue3DraggableResizable
        v-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