vue resize handle

handle to resize an element - done in vue

Vue

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/.