vue3 使用vue3-draggable-resizable实现 拉伸，拖拽

下载插件

npm install vue3-draggable-resizable

引入插件

1.全局引入  main.js

import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

// You will have a global component named "Vue3DraggableResizable"
createApp(App)
  .use(Vue3DraggableResizable)
  .mount('#app')

2.局部引入  组件.vue

import { DraggableContainer } from 'vue3-draggable-resizable';
import Vue3DraggableResizable from 'vue3-draggable-resizable';
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';

插件实现

<!-- 父容器 -->
<DraggableContainer :referenceLineColor="'white'">
           
            <!-- 移动容器 -->
            <Vue3DraggableResizable
            v-if="dialogVisible"
              :initW="400"
              :initH="400"
              v-model:x="x"
              v-model:y="y"
              v-model:w="width"
              v-model:h="height"
              v-model:active="active"
              :draggable="true"
              :resizable="true"
              :parent="true"
            >
            <div class="dialog">
              <!-- 移动内容 -->
              </div>
              
            </div>
            </Vue3DraggableResizable>
          </DraggableContainer>

注释：

 :initW=""//初始宽度
        :initH=""//初始高度
        v-model:x=""//组件距离父容器的左侧的距离（px）
        v-model:y=""//组件距离父容器的左侧的距离（px）
        v-model:w=""//容器宽度高度
        v-model:h=""//容器
        v-model:active=""//是否激活
        :draggable=""//是否可拖动
        :resizable=""//是否可改变大小
        :parent=""//能否超出父容器
        @resize-end="resizeEndHandle(item)"//拖拽结束执行