VueResizable is a small, configurable resizable component that allows the user to resize an element using drag and drop.
Must Read: Vue.js Drag and Drop Tree View Component Library
How to make use of it:
Install and download:
# NPM $ npm install vue-resizable --save
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. The default props to configure 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
}Properties
Must Read: Angular 2+ Drag and Drop File Uploader | ngx-uploader
| Property | Data attribute | Type | Default | Description |
|---|---|---|---|---|
| width | w | [Number, String] | undefined | Width in pixel or ‘auto’ |
| minWidth | minW | Number | 0 | Minimum width |
| maxWidth | maxW | Number | undefined | Maximum width |
| height | h | [Number, String] | undefined | Height in pixel, or ‘auto’ |
| minHeight | minH | Number | 0 | Minimum height |
| maxHeight | maxH | Number | undefined | Maximum height |
| left | l | [Number, String] | 0 | Offset left from parent |
| top | t | [Number, String] | 0 | Offset top from parent |
| active | Array | [‘r’, ‘rb’, ‘b’, ‘lb’, ‘l’, ‘lt’, ‘t’, ‘rt’] | Active handlers for resize | |
| fitParent | Boolean | false | Respect parent’s size on resizing | |
| dragSelector | dragElements | String | undefined | Drag selector |
| maximize | Boolean | false | Maximize element to parent size | |
| disableAttributes | calcMap | Array | [] | Disable changes to attributes, Available values: [‘l’, ‘t’, ‘w’, ‘h’] |
Events
Must Read: Advanced Drag and Drop File Picker for Uploader | jquery-formhelper
| Name | Payload | Description |
|---|---|---|
| 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 |
| maximize | [eventName, left, top, width, height, state] | Called when the “maximize” state changed |
See Demo And Download
Official Website(nikitasnv): Click Here`
This superior jQuery/javascript plugin is developed by nikitasnv. For extra Advanced Usage, please go to the official website.
