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

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
效果演示：