Vue-resizable NPM

VueResizable

Vue component that allows you to resize and drag elements

Demo

Demo page\ CodeSandbox\ Material window

Installation

npm install vue-resizable --save

Basic usage

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

<script>
import VueResizable from 'vue-resizable'

export default {
    name: "YourApp",
    components: {VueResizable}
}
</script>

<style scoped>
    .resizable-content {
        height: 100%;
        width: 100%;
        background-color: aqua;
    }
</style>

Properties

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

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 "maximize" state changed