vue耦合与解耦_裁剪机与图像解耦的简单vue组件

vue耦合与解耦

Vue作物 (vue-crop)

a simple vue component of croper, Decoupling with Images, The maximum minimum aspectRatio value can be set.

裁剪器的一个简单vue组件，与图像分离，可以设置最大最小aspectRatio值。

安装与使用 (install & use)

npm install --save vue-crop-simple

npm install-保存vue-crop-simple

import VueCrop from 'vue-crop-simple';
import 'vue-crop-simple/dist/vue-crop.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>

道具： (props:)

• 初始化 (initRect)

  目的
  default {x1: -1, y1: -1, x2: -1, y2: -1}
  默认{x1：-1，y1：-1，x2：-1，y2：-1}
  
  you can set init crop area by this porp
  您可以通过此小节设置初始裁剪区域

• showRect (showRect)

  布尔型
  default true
  默认为true
  
  show or hide crop rect
  显示或隐藏裁剪矩形

• 调整大小 (resizeAble)

  布尔型
  default true
  默认为true
  
  set the crop rect resizeable property
  设置裁剪矩形的可调整大小属性

• AspectRatio (aspectRatio)

  数
  default undefined
  默认未定义
  
  set the crop rect aspect radio property. this value makes from width / height
  设置裁剪区域纵横比的无线电属性。 这个值来自宽度/高度

• allowStartNewCrop (allowStartNewCrop)

  布尔型
  default true
  默认为true
  
  allow draw a new rect(when a rect is showing).
  允许绘制一个新的rect(显示rect时)。

• minWidth (minWidth)

  数
  default undefined
  默认未定义
  
  the min width of crop rect
  裁剪矩形的最小宽度

• maxWidth (maxWidth)

  数
  default undefined
  默认未定义
  
  the max width of crop rect
  裁剪矩形的最大宽度

• minHeight (minHeight)

  数
  default undefined
  默认未定义
  
  the min height of crop rect
  作物的最小高度

• 最大高度 (maxHeight)

  数
  default undefined
  默认未定义
  
  the max height of crop rect
  作物最大高度

事件： (events:)

• 变更前 (beforeChange)

  当用户准备拖动裁剪矩形时触发。

• 变了 (changed)

  拖动结束时触发

• 被创造 (created)

  当安装了裁切器组件时触发

翻译自: https://vuejsexamples.com/a-simple-vue-component-of-croper-decoupling-with-images/

vue耦合与解耦