a simple vue component of croper, Decoupling with Images, The maximum minimum aspectRatio value can be set.
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
}
Object
default {x1: -1, y1: -1, x2: -1, y2: -1}
you can set init crop area by this porp
Boolean
default true
show or hide crop rect
Boolean
default true
set the crop rect resizeable property
Number
default undefined
set the crop rect aspect radio property. this value makes from width / height
Boolean
default true
allow draw a new rect(when a rect is showing).
Number
default undefined
the min width of crop rect
Number
default undefined
the max width of crop rect
Number
default undefined
the min height of crop rect
Number
default undefined
the max height of crop rect
trigger when user is ready to drag the crop rect.
trigger when drag end
trigger when croper component is mounted
#vuejs #javascript