vue-crop
a simple vue component of croper, Decoupling with Images, The maximum minimum aspectRatio value can be set.
LICENSE
install & use
npm install --save vue-crop-simple
import VueCrop from 'vue-crop-simple';
import 'vue-crop-simple/dist/vue-crop-simple.css';
Vue.use(VueCrop);
<vue-crop
@changed="changeHandler"
@beforeChange="beforeChangeHandler"
:init-rect="{x1: 10, x2: 110, y1: 10, y2: 110}"
:allowStartNewCrop="false"
:min-height="100"
:min-width="100"
:max-width="500"
:max-height="500">
</vue-crop>
use in plugin
import VueCrop from 'vue-crop-simple';
import 'vue-crop-simple/dist/vue-crop-simple.css';
// in vue component file
components: {
VueCrop
}
preview
props:
- ### initRect
Object
default {x1: -1, y1: -1, x2: -1, y2: -1}
you can set init crop area by this porp - ### showRect
Boolean
default true
show or hide crop rect - ### resizeAble
Boolean
default true
set the crop rect resizeable property - ### aspectRatio
Number
default undefined
set the crop rect aspect radio property. this value makes from width / height - ### allowStartNewCrop
Boolean
default true
allow draw a new rect(when a rect is showing). - ### minWidth
Number
default undefined
the min width of crop rect - ### maxWidth
Number
default undefined
the max width of crop rect - ### minHeight
Number
default undefined
the min height of crop rect - ### maxHeight
Number
default undefined
the max height of crop rect
events:
- ### beforeChange trigger when user is ready to drag the crop rect.
- ### changed trigger when drag end
- ### created trigger when croper component is mounted