vrp-vue-resizable
v1.2.7
Published
Vue2 component that allows to resize and drag elements
Downloads
2,678
Maintainers
Readme
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
| minWidth | minW | Number | 0 | Minimum width
| maxWidth | maxW | Number | undefined | Maximum width
| height | h | [Number, String] | undefined | 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 | 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.