vue-resizable

Vue2 component that allows to resize and drag elements
2,442,850 227
vue component resizable resize
Install
npm install vue-resizable
Latest Version:2.1.7
Vue:3
Older releases:2
License:MIT
Last Updated:Jul 6, 2022
Links: GitHub  ·  npm
Maintainer: nikitasnv

VueResizable

Latest Version on NPM npm Software License

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.

Related Packages

vue-resizables

The resize utilities of Vue.

14,264 14
resizable resize vue
vue-columns-resizable-vuetify

Vue directive for making table columns resizable.

10,852 7
resizable resize vue vuetify
vrp-vue-resizable

Vue2 component that allows to resize and drag elements

2,049 227
component resizable resize vue
v-resizable

Vue directive for resizable elements

25,554 16
resizable resize vue directive vue-directive vuejs
vue3-resizable

Vue3 is used for components with resizable and draggable elements.

7,221
component resizable resize vue vue3 调整大小

Version History

Version Released License
2.1.7 MIT
2.1.6 MIT
2.1.5 MIT
2.1.4 MIT
2.1.3 MIT