Package Exports

vue-resizable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-resizable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VueResizable

Vue component that allows resizing elements

Demo

CodeSandbox

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]	200	Width
minWidth	minW	Number	0	Minimum width
maxWidth	maxW	Number	undefined	Maximum width
height	h	[Number, String]	200	Height
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		String	undefined	Drag selector

Events

Name	Payload	Description
resize:mount	[left,top,width,height]	Called after the component is mounted
resize:destroy	[left,top,width,height]	Called before the component is destroyed
resize:start	[left,top,width,height]	Called after clicking on one of the active handlers
resize:move	[left,top,width,height]	Called when a handler is being dragged
resize:end	[left,top,width,height]	Called when the mouse button was released

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.