Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

vue-resizable

1.0.15 • Public • Published

VueResizable

Latest Version on NPM npm Software License

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

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.

install

npm i vue-resizable

Downloadsweekly downloads

8

version

1.0.15

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability