vue图片组件使用方法（Vue图片裁剪组件实例代码）

npm install vue-cropper

yarn add vue-cropper

<!-- 简易图片裁剪组件 --- 二次封装 -->
<!-- 更多api https://github.com/xyxiao001/vue-cropper -->
<!-- 使用：传入图片 比例 显示隐藏。方法：监听底部按钮点击即可  ---更多props查询文档自行添加 -->

<template>
  <li v-if="value" :value="value" @input="val => $emit('input', val)" class="conbox">
    <li class="info">
      <vueCropper
        ref="cropper"
        :img="img"
        :outputSize="outputSize"
        :outputType="outputType"
        :info="info"
        :canScale="canScale"
        :autoCrop="autoCrop"
        :fixed="fixed"
        :fixedNumber="fixedNumber"
        :full="full"
        :fixedBox="fixedBox"
        :canMove="canMove"
        :canMoveBox="canMoveBox"
        :original="original"
        :centerBox="centerBox"
        :infoTrue="infoTrue"
        :mode="mode"
      ></vueCropper>
    </li>
    <li class="btns">
      <li @click="clickCancelCut" class="cancel">取消</li>
      <img @click="clickRotate" src="../../assets/paradise/rotate.jpg" alt="vue图片组件使用方法（Vue图片裁剪组件实例代码）" border="0" />