vue-draggable-resizable实现改变宽高

### Vue3 中使用 `vue-draggable-resizable` 实现元素宽度高度可调整 #### 安装依赖库 为了在项目中集成并使用 `vue3-draggable-resizable`，需先安装该组件包。 ```bash npm install @bruno-silva/vue3-draggable-resizable ``` #### 导入与注册组件 接着，在项目的入口文件或具体使用的页面导入此组件，并完成全局或局部注册操作。 ```javascript // main.js 或 setup 文件内 import { createApp } from 'vue'; import App from './App.vue'; import DraggableResizable from '@bruno-silva/vue3-draggable-resizable'; const app = createApp(App); app.component('draggable-resizable', DraggableResizable); // 注册为全局组件 app.mount('#app'); ``` #### 基本属性配置 通过设置不同的 props 来控制组件行为，比如初始尺寸、最小最大限制等。下面是一个简单的例子展示如何定义一个可以被拖动和改变大小的 div[^1]： ```html <template> <div style="position:relative; width:80vw;height:80vh;"> <!-- draggable 和 resizable 默认都开启 --> <draggable-resizable :w="200" :h="200"> <p>尝试拉动边角来调整我的大小</p> </draggable-resizable> </div> </template> <script> export default { name: "ExampleComponent", }; </script> ``` 上述代码创建了一个默认宽度为200px, 高度也为200px 的区域，用户可以通过鼠标点击并拖拽其四周边缘来进行缩放操作。 #### 进阶功能定制 除了基本的功能外，还可以进一步自定义更多特性，例如启用网格模式让移动更加精准；设定边界约束防止超出父容器范围；以及监听事件获取当前状态的变化等等。 ```html <template> <div id="container" style="position:relative;width:600px;height:400px;border:1px solid black;"> <draggable-resizable v-model:x="posX" v-model:y="posY" v-model:w="width" v-model:h="height" :grid="[10, 10]" :parent-limitation="true" @resizing="onResize" @dragging="onDrag" > {{ posX }} / {{ posY }} </draggable-resizable> </div> </template> <script> export default { data() { return { posX: 0, posY: 0, width: 200, height: 200, }; }, methods: { onResize(newRect) { console.log(`新的矩形信息：${JSON.stringify(newRect)}`); }, onDrag(newPos) { console.log(`新位置：(${newPos.left}, ${newPos.top})`); } } } </script> ``` 这段代码展示了更复杂的场景，其中包含了双向绑定的位置(x,y)，宽高(w,h), 同时启用了基于像素单位(这里是10x10) 的网格布局(grid)，并且设置了不允许子元素移出父级容器(parent limitation)。