一个小型且可配置的可调整大小的组件，允许用户使用拖放来调整元素的大小。

变更日志：

v2.0.0（03/06/2021）

• Vue 3的更新

v1.2.5（09/16/2020）

• 禁用的属性不会更改内联样式

v1.2.3（08/09/2020）

• 触摸事件支持

v1.2.2（08/02/2020）

• 更新

v1.2.1（07/31/2020）

• 删除旧的拖动类

安装和下载：

# NPM
$ npm install vue-resizable --save

使用：

1.导入并注册VueResizable组件。

import VueResizable from 'vue-resizable'

export default {
  name: "YourApp",
  components: {VueResizable}
}

2.将可调整大小的元素插入组件。

<template>
  <vue-resizable>
    <div class="resizable-content"></div>
  </vue-resizable>
</template>

3.默认props来配置可调整大小的组件。

width: {
  default: 200,
  type: [Number, String]
},
minWidth: {
  default: 0,
  type: Number
},
maxWidth: {
  default: undefined,
  type: Number,
},
height: {
  default: 200,
  type: [Number, String]
},
minHeight: {
  default: 0,
  type: Number
},
maxHeight: {
  default: undefined,
  type: Number
},
left: {
  default: 0,
  type: [Number, String]
},
top: {
  default: 0,
  type: [Number, String]
},
active: {
  default: () => ['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'],
  validator: (val) => ['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'].filter(value => val.indexOf(value) !== -1).length === val.length,
  type: Array
},
fitParent: {
  default: false,
  type: Boolean
},
dragSelector: {
  default: undefined,
  type: String
}

4.事件处理程序。

• mount（eventName，left，top，width，height）：安装组件后调用
• destroy（eventName，left，top，width，height）：在销毁组件之前调用
• resize：start（eventName，left，top，width，height）：单击活动处理程序之一后调用
• resize：move（eventName，left，top，width，height）：在拖动处理程序时调用
• resize：end（eventName，left，top，width，height）：调整大小后释放鼠标按钮时调用
• drag：start（eventName，left，top，width，height）：单击拖动元素之一后调用
• drag：move（eventName，left，top，width，height）：拖动拖动元素时调用
• drag：end（eventName，left，top，width，height）：拖动后释放鼠标按钮时调用

---

官网：https://github.com/nikitasnv/vue-resizable

演示：https://www.vue365.cn/code_demo.php?id=255

GitHub下载：https://github.com/nikitasnv/vue-resizable/archive/master.zip