【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.完整代码

<template>
  <div id="box">
    <VueDragResize
      :w="width"
      :h="height"
      :y="top"
      :x="left"
      :isActive="true"
      @resizing="resize"
      @dragging="resize"
    >
      <p>top：{{ top }} px</p>
      <p>left：{{ left }} px</p>
      <p>width：{{ width }} px</p>
      <p>height：{{ height }} px</p>
    </VueDragResize>
  </div>
</template>

<script>
import VueDragResize from "vue-drag-resize";

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

  data() {
    return {
      top: 20,
      left: 20,
      width: 200,
      height: 200,
    };
  },

  methods: {
    resize(newRect) {
      this.top = newRect.top;
      this.left = newRect.left;
      this.width = newRect.width;
      this.height = newRect.height;
    },
  },
};
</script>
<style scoped>
.active {
  border: 2px dashed red;
  background: rgba(128, 138, 135, 0.3);
}
.active .content-container p {
  text-align: center;
}
</style>

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">

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

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

参数类型: 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">

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

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

参数类型: 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
效果演示：