vue-crop-simple

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