- Notifications
You must be signed in to change notification settings - Fork9
vue-comps/vue-resize-handle
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
When you want to able to resize an element uni- or bidirectional, you need a resize-handle.
npm install --save-dev vue-resize-handle
or includebuild/bundle.js.
# link the components upcomponents:"resizer":require"vue-resize-handle/unidirectional"# or:"resizer":require"vue-resize-handle/bidirectional"# when using the bundlecomponents:"resizer":window.vueComps.resizeHandle.uni# or:"resizer":window.vueComps.resizeHandle.bidata:->width:200# or:style:width:200height:200
<div:style="{width:width+'px'}"><resizer:size.sync="width"></resizer></div># or<div:style="style"><resizer:size.sync="style"></resizer></div>
For examples seedev/.
| Name | type | default | description |
|---|---|---|---|
| offset | Number | 0 | how far the handle overlaps the parent |
| extent | Number | 10 | extent of the handle in px |
| 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 |
| 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 |
| 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 afterresize |
Clone repository.
npm installnpm run dev
Browse tohttp://localhost:8080/.
Copyright (c) 2016 Paul PflugradtLicensed under the MIT license.
About
handle to resize an element - done in vue
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.