Resize Element With Drag And Drop – VueResizable

Description:

A small and configurable resizable component that allows the user to resize an element using drag and drop.

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

Download Details:

Author: nikitasnv

Live Demo: https://nikitasnv.github.io/vue-resizable/

Download Link: https://github.com/nikitasnv/vue-resizable/archive/master.zip

Official Website: https://github.com/nikitasnv/vue-resizable

Last Update: November 28, 2019

Install:

# NPM
$ npm install vue-resizable --save

You Might Be Interested In:

Tags:

Add Comment