msyj-client/src/modules/client/components/steps/TailorTailorArea.vue

<template>
  <div class="tailor-area">
    <div class="code-area-cont">
      <img :src="imageUrl" ref="editImage" />
    </div>
  </div>
</template>

<script>
import Cropper from "cropperjs";

export default {
  name: "tailor-area",
  props: {
    imageUrl: {
      type: String,
      require: true
    },
    curSetting: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      cropper: ""
    };
  },
  mounted() {
    this.initCropper();
  },
  methods: {
    initCropper() {
      const _this = this;
      const defTailorArea = this.curSetting
        ? this.curSetting.tailorTailorArea || this.curSetting.originTailorArea
        : {};

      this.cropper = new Cropper(this.$refs.editImage, {
        viewMode: 1,
        checkCrossOrigin: false,
        zoomable: false,
        minCropBoxWidth: 10,
        minCropBoxHeight: 10,
        ready() {
          _this.cropper.setData(defTailorArea);
          _this.$emit("on-ready");
        }
      });
    },
    checkValid() {
      const tailorTailorArea = {
        ...this.cropper.getData()
      };
      this.$emit("on-next", { tailorTailorArea });
    },
    pass() {
      this.$emit("on-next", { tailorTailorArea: {} });
    }
  },
  beforeDestroy() {
    if (this.cropper) {
      this.cropper.destroy();
      this.cropper = false;
    }
  }
};
</script>