前言：公司业务：在很多地方装了路灯，给路灯做了个管理系统，有管理系统肯定就是增，删，查，改，但是这次改好像有点复杂。给路灯下发指令，可以在路灯的大屏放文字，视频，图片，文字可以拉伸，图片可以拉伸，视频还可以！拉伸框还不能太丑！

方案一：

这个方案是最朴实无华，也是最容易想到的，那当然是手写一个开源库！！！反正我不写，有事我就找github！🐕这个方案固然已经可以满足我们目前的需求，但是等你写出来，老板已经让你家里蹲了。

方案二：

那肯是github找库了，这个过程异常艰辛，用了quill-image-resize-module，至少5个库，就是报错，就在我抓耳挠腮的同时，微信响了，我们老大发了一个库：vue3-draggable-resizable

接下来说说用法吧：

1：下载这个库 

npm install vue3-draggable-resizable

亦或是：

yarn add vue3-draggable-resizable

2:用法，代码如下：

<template><div><div id="app"><div class="parent"><Vue3DraggableResizable:initW="110":initH="120"v-model:x="x"v-model:y="y"v-model:w="w"v-model:h="h"v-model:active="active":draggable="true":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')"><img :src="imageUrl" :width="w" :height="h" alt="Draggable Image" /></Vue3DraggableResizable></div></div></div>
</template><script setup lang="ts">
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'const x = ref(0);
const y = ref(0);
const w = ref(110);
const h = ref(120);
const active = ref(false);
const imageUrl = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
const print = (val)=>{console.log(val)
}
</script><style lang="scss" scoped>
.parent {width: 200px;height: 200px;position: absolute;top: 100px;left: 100px;border: 1px solid #000;user-select: none;
}
</style>

效果图：

3：解释一下代码吧：

<template><div><div id="app"><div class="parent"><Vue3DraggableResizable:initW="110"    //:initW="110" 和 :initH="120"：初始宽度和高度。:initH="120"v-model:x="x"   //v-model:x="x" 和 v-model:y="y"：绑定拖动的位置。v-model:y="y"v-model:w="w"   //v-model:w="w" 和 v-model:h="h"：绑定调整大小的宽度和高度。v-model:h="h"v-model:active="active" //v-model:active="active"：绑定激活状态。:draggable="true":resizable="true" //:draggable="true" 和 :resizable="true"：启用拖动和调整大小功能。:containment="'parent'" //限制拖动和调整大小的范围在父元素内。//@activated、@deactivated、@drag-start 等）：用于在不同事件发生时调用 print 方法并输出相应的事件名称。                   @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')">//<img :src="imageUrl" :width="w" :height="h" alt="Draggable Image" />图片的宽度和高度绑定到 w 和 h，确保图片随组件的尺寸变化而变化。<img :src="imageUrl" :width="w" :height="h" alt="Draggable Image" /></Vue3DraggableResizable></div></div></div>
</template><script setup lang="ts">
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'const x = ref(0);
const y = ref(0);
const w = ref(110);
const h = ref(120);
const active = ref(false);
const imageUrl = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
const print = (val)=>{console.log(val)
}
</script><style lang="scss" scoped>
.parent {width: 200px;height: 200px;position: absolute;top: 100px;left: 100px;border: 1px solid #000;user-select: none;
}
</style>

 结尾：

到这里就结束了，当然这只是最基础的用法，如果还有其他逻辑，可以看GitHub----->

vue3-draggable-resizable