vue3.x中使用vue-cropper进行图片裁剪

在vue3.x中使用应该使用vue-cropper@next版本
github详解

---

npm install vue-cropper@next

import 'vue-cropper/dist/index.css'

//组件中使用
import { VueCropper }  from "vue-cropper";

---

自己可以把裁剪二次封装成一个组件，用在自己项目中
可以使用一个dialog承载它，当你上传完图片，展示裁剪dialog进行裁剪

---

 <el-dialog v-model="dialogVisible" title="Tips" width="30%">
    <div class="外层这个样式一定要给你一个高">
      <VueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber"
        :can-move="option.canMove"
        :can-move-box="option.canMoveBox"
        :fixed-box="option.fixedBox"
        :original="option.original"
        :auto-crop="option.autoCrop"
        :auto-crop-width="option.autoCropWidth"
        :auto-crop-height="option.autoCropHeight"
        :center-box="option.centerBox"
        @realTime="realTime"
        :high="option.high"
        @img-load="imgLoad"
        mode="cover"
        :max-img-size="option.max"
        @crop-moving="cropMoving"
      ></VueCropper>
    </div>
  </el-dialog>

    option: {
        img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4",
        size: 1,
        full: false,
        outputType: "png",
        canMove: false,
        fixedBox: false,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 160,
        autoCropHeight: 150,
        centerBox: true,
        high: true,
        max: 99999,
        fixed: true,
        fixedNumber: [1, 2],
      },