Resize Element With Drag And Drop - VueResizable

Install & Download:

# NPM
$ npm install vue-resizable --save

Description:

A small and configurable resizable component that allows the user to resize an element using drag and drop. Compatible with Vue 3 and Vue 2.

How to use it:

1. Import and register the VueResizable component.

import VueResizable from 'vue-resizable'
export default {
  name: "YourApp",
  components: {VueResizable}
}

2. Insert a resizable element into your component.

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

3. Default props to config the resizable component.

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. Event handlers.

mount(eventName,left,top,width,height): Called after the component is mounted
destroy(eventName,left,top,width,height): Called before the component is destroyed
resize:start(eventName,left,top,width,height): Called after clicking on one of the active handlers
resize:move(eventName,left,top,width,height): Called when a handler is being dragged
resize:end(eventName,left,top,width,height): Called when the mouse button was released after resize
drag:start(eventName,left,top,width,height): Called after clicking on one of the drag elements
drag:move(eventName,left,top,width,height): Called when a drag element is being dragged
drag:end(eventName,left,top,width,height): Called when the mouse button was released after drag