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

Development

To begin development, run:

npm install 
npm run dev

It starts webpack-dev-server on localhost:8080 with Demo page.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.