vue-resizable

Vue component that allows you to resize and drag elements

Demo

Demo page\ CodeSandbox\ Material window

Installation

```sh npm install vue-resizable --save ```

Basic usage

```vue

<vue-resizable>

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

</vue-resizable>

```

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: ``` bash 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.