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

<template>
  <div class="cover-area">
    <div class="code-area-cont">
      <img :src="imageUrl" ref="editImage" />
    </div>
    <div class="code-area-preview">
      <div class="code-area-spin">
        <div class="code-area-spin-img" ref="CoverAreaSpinImg"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Cropper from "cropperjs";

export default {
  name: "cover-area",
  props: {
    imageUrl: {
      type: String,
      require: true
    },
    curSetting: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      cropper: ""
    };
  },
  mounted() {
    this.initCropper();
  },
  methods: {
    initCropper() {
      const _this = this;
      const defCoverArea = (this.curSetting && this.curSetting.coverArea) || {};

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