ResizableCore component for VueJs. Component to change element size.
It's based on https://github.com/STRML/react-resizable
- Clone project.
- run
$ npm run dev
npm install vue-resizable-core
import VueResizableCore from 'vue-resizable-core'
Vue.component('vue-resizable-core', VueResizableCore)
className: {
type: String,
required: false,
default: ""
},
w: {
type: Number,
required: true
},
h: {
type: Number,
required: true
},
grid: {
type: Array,
required: false,
default: () => [1, 1]
},
lockAspectRatio: {
type: Boolean,
required: false,
default: false
},
//'both' | 'x' | 'y' | 'none';
axis: {
type: String,
required: false,
default: 'both'
},
minConstraints: {
type: Array,
required: false,
default: () => [20, 20]
},
maxConstraints: {
type: Array,
required: false,
default: () => [Infinity, Infinity]
},
onResizeStart: {
type: Function,
required: false,
default: () => {}
},
onResizeStop: {
type: Function,
required: false,
default: () => {}
},
onResize: {
type: Function,
required: false,
default: () => {}
},
Width of element.
Height of element.
Snaps resized element to grid, default [1,1]
.
Grants draggability
to given selector, others selectors inside are undraggable.
Grants one of directions in which we can resize element 'both' | 'x' | 'y' | 'none'
;
Min element size, default [20, 20]
Max element size, default [Infinity, Infinity]
Function called when resizing
is started.
Function called when resizing
is moved.
Function called when resizing
is ended.
Given string is merged into css class of component.
MIT