vue-resize-handle
vue-resize-handle
When you want to able to resize an element uni- or bidirectional, you need a resize-handle.
Demo
Install
npm install --save-dev vue-resize-handle
or include build/bundle.js.
Usage
# link the components up
components:
"resizer": require "vue-resize-handle/unidirectional"
# or:
"resizer": require "vue-resize-handle/bidirectional"
# when using the bundle
components:
"resizer": window.vueComps.resizeHandle.uni
# or:
"resizer": window.vueComps.resizeHandle.bi
data: ->
width: 200
# or:
style:
width: 200
height: 200
<div :style="{width:width+'px'}">
<resizer :size.sync="width"></resizer>
</div>
# or
<div :style="style">
<resizer :size.sync="style"></resizer>
</div>
For examples see dev/.
Props
Both
| Name | type | default | description |
|---|---|---|---|
| offset | Number | 0 | how far the handle overlaps the parent |
| extent | Number | 10 | extent of the handle in px |
Unidirectional
| Name | type | default | description |
|---|---|---|---|
| minSize | Number | 0 | minimal size of the parent |
| defaultSize | Number | -1 | default size of the parent (will be set if dblclick on handle) |
| maxSize | Number | Number.MAX_VALUE | maximal size of the parent |
| side | String | "right" | one of "top","right","bottom","left" |
| size | Number | - | (two-way) will be updated on resize |
Bidirectional
| Name | type | default | description |
|---|---|---|---|
| minSize | Object | {height:0, width:0} | minimal size of the parent |
| defaultSize | Object | {height:-1, width:-1} | default size of the parent (will be set if dblclick on handle) |
| maxSize | Object | {height:Number.MAX_VALUE, width:Number.MAX_VALUE} | maximal size of the parent |
| keepRatio | Boolean | false | enforce aspect ratio |
| corner | String | "se" | one of "se","sw","ne","nw" (cardinal points) |
| size | Object | {height:0, width:0} | (two-way) will be updated on resize |
Events
| Name | Arguments | description |
|---|---|---|
| resize-start | this.size, this | emitted when resize starts |
| resize | this.size, oldSize, this | emitted on resize and on reset |
| resize-end | this.size, this | emitted when resize ends |
| reset-size | - | emitted on reset after resize |
Development
Clone repository.
npm install
npm run dev
Browse to http://localhost:8080/.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.
Related Packages
vue-draggable-resizable-gorkys
Vue 3 draggable and resizable component with snapping, guide lines, and conflict...
29,641
1,271
vue-directive-window
Vue.js directive that enhance your Modal Window, support drag, resize and maximi...
1,359
31
@minogin/vue-drag-resize-rotate
Vue component which acts as a draggable, resizable and rotateable container for...
7,341
78
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.0.0 | ^1.0.25 | MIT | |
| 0.1.1 | ^1.0.16 | MIT | |
| 0.1.0 | ^1.0.16 | MIT |