【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度

vue-drag-resize是专门为 Vue 开发的插件，与 Vue 的生态系统完美融合。它可以很容易地集成到现有的 Vue 项目中，无需复杂的配置和额外的依赖
具有以下特点：

功能强大

• 提供灵活的拖拽功能，可轻松移动各种类型的组件或元素位置，满足复杂界面布局需求；
• 支持精准调整大小，通过拖拽元素边缘或角落，精确控制元素尺寸，可单个或批量操作；

易于使用

• 与 Vue 框架无缝集成，无需复杂配置和额外依赖，可直接在 Vue 组件中使用，便捷性高；
• 拥有简洁的 API 设计，文档清晰易懂，方便开发者快速上手；

高度可定制

• 可对拖拽和调整大小的元素进行样式定制，包括边框样式、背景颜色、阴影等，与项目整体风格一致；
• 提供丰富事件，开发者可根据事件执行特定业务逻辑，实时获取元素位置和大小信息；

性能优化

• 具备高效的渲染性能，采用优化算法和渲染机制，在大规模数据和复杂界面下仍保持流畅操作；
• 合理管理内存使用，避免内存泄漏和资源浪费，保证应用稳定性和性能；

1. 安装 vue-drag-resize 插件

npm install vue-drag-resize --save

2. 在 main.js 中注册为全局组件

import VueDragResize from "vue-drag-resize";
Vue.component("vue-drag-resize", VueDragResize);

3. 在 vue 文件中引入组件

import VueDragResize from "vue-drag-resize";
export default {
  name: "VueDragResize",
  components: {
    VueDragResize,
  }
}

4. 完整代码

vue-drag-resize 属性:

active

• 参数类型: Boolean
• 是否必选：是，
• 默认传值: false
• 说明：确定组件是否应处于活动状态。prop 对更改做出反应，也可以与 syncmodifier 一起使用以保持状态与父级同步。

vue-draggable-resizable :active="true">

draggable

• 参数类型: Boolean
• 是否必选: false
• 默认传值: true
• 说明：定义组件应该是否可拖动。

vue-draggable-resizable :draggable="false">

resizable

• 参数类型: Boolean
• 是否必选: false
• 默认传值: true
• 说明：定义组件是否可以调整大小。

vue-draggable-resizable :resizable="false">

w

• 参数类型: Number
• 是否必选: false
• 默认传值: 200
• 说明：定义元素的初始宽度。

vue-draggable-resizable :w="200">

h

• 参数类型: Number
• 是否必选: false
• 默认传值: 200
• 说明：定义元素的初始高度。

vue-draggable-resizable :h="200">

minw

• 参数类型: Number
• 是否必选: false
• 默认传值: 50
• 说明：定义元素的最小宽度。

vue-draggable-resizable :minw="50">

minh

• 参数类型: Number
• 是否必选: false
• 默认传值: 50
• 说明：定义元素的最小高度。

vue-draggable-resizable :minh="50">

x

• 参数类型: Number
• 是否必选: false
• 默认传值: 0
• 说明：定义元素的初始 x 位置。

vue-draggable-resizable :x="0">
``
**y**
- 参数类型: Number
- 是否必选: false
- 默认传值: 0
- 说明：定义元素的初始 y 位置。```html
vue-draggable-resizable :y="0">

z

• 参数类型: Number|String
• 是否必选: false
• 默认传值: auto
• 说明：定义元素的 zIndex。

vue-draggable-resizable :z="999">

handles

• 参数类型: Array
• 是否必选: false
• 默认传值: [‘tl’,‘tm’,‘tr’,‘mr’,‘br’,‘bm’,‘bl’,‘ml’]
• 说明：定义句柄数组以限制元素大小调整：
  tl – 左上角
  tm – 中上方
  tr – 右上角
  mr – 右中方
  br – 右下角
  bm – 下中方
  bl – 左下方
  ml – 左中方

vue-draggable-resizable :handles="['tm','bm','ml','mr']">

axis

• 参数类型: String
• 是否必选: false
• 默认传值: both
• 说明：定义元素可拖动的轴。可用值为 x, y 或者 both.

vue-draggable-resizable axis="x">

grid

• 参数类型: Array
• 是否必选: false
• 默认传值: [1,1]
• 说明：定义捕捉元素的网格。

vue-draggable-resizable :grid="[1,1]">

parent

• 参数类型: Boolean
• 是否必选: false
• 默认传值: false
• 说明：将元素的移动和尺寸限制为父元素。

vue-draggable-resizable :parent="true">

dragHandle

• 参数类型: String
• 是否必选: false
• 说明：定义应该用于拖动组件的选择器。

vue-draggable-resizable drag-handle=".drag">

dragCancel

• 参数类型: String
• 是否必选: false
• 说明：定义应该用于阻止拖动初始化的选择器。

vue-draggable-resizable drag-cancel=".drag">

maximize

• 参数类型: Boolean
• 是否必选: false
• 默认传值: false
• 说明：如果设置为 true，则允许组件在双击时填充其父级。

vue-draggable-resizable :maximize="true">

vue-drag-resize 事件:

activated

• 是否必选: false
• 参数: –
• 说明：单击组件时调用，以显示句柄。

vue-draggable-resizable @activated="onActivated">

deactivated

• 是否必选: false
• 参数: –
• 说明：每当用户单击组件外的任何位置时调用，以便停用它。

vue-draggable-resizable @deactivated="onDeactivated">

resizing

• 是否必选: false
• 参数:
  left 元素的 X 位置
  top 元素的 Y 位置
  width 元素的宽度
  height 元素的高度
• 说明：每当组件调整大小时调用。

vue-draggable-resizable @resizing="onResizing">

resizestop

• 是否必选: false
• 参数:
  left 元素的 X 位置
  top 元素的 Y 位置
  width 元素的宽度
  height 元素的高度
• 说明：每当组件停止调整大小时调用。

vue-draggable-resizable @resizestop="onResizstop">

dragging

• 是否必选: false
• 参数:
  left 元素的 X 位置
  top 元素的 Y 位置
• 说明：每当拖动组件时调用。

vue-draggable-resizable @dragging="onDragging">

dragstop

• 是否必选: false
• 参数:
  left 元素的 X 位置
  top 元素的 Y 位置
• 说明：每当组件停止拖动时调用。

vue-draggable-resizable @dragstop="onDragstop">

项目地址 ：https://github.com/gorkys/vue-draggable-resizable-gorkys
效果演示：