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

<template>
  <div class="image-orientation">
    <div class="image-orient-cont">
      <img
        class="img-contain"
        :src="imageUrl"
        :style="contStyle"
        ref="editImage"
      />
    </div>
    <div class="image-orient-btns">
      <div
        class="image-orient-icon rotate-icon rotate-icon-left"
        title="逆时针旋转90度"
        @click="toRotate(0)"
      ></div>
      <div
        class="image-orient-icon rotate-icon rotate-icon-right"
        title="顺时针旋转90度"
        @click="toRotate(1)"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "image-orientation",
  props: {
    imageUrl: {
      type: String,
      require: true
    },
    curSetting: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      contStyle: {},
      picRotate: 0
    };
  },
  mounted() {
    const defImageRotate =
      (this.curSetting && this.curSetting.imageRotate) || 0;
    this.picRotate = defImageRotate;
    this.contStyle = {
      transform: `rotate(${this.picRotate}deg)`
    };
    this.$emit("on-ready");
  },
  methods: {
    toRotate(type) {
      if (type) {
        this.picRotate += 90;
        if (this.picRotate === 360) this.picRotate = 0;
      } else {
        if (this.picRotate === 0) this.picRotate = 360;
        this.picRotate -= 90;
      }

      this.contStyle = {
        transform: `rotate(${this.picRotate}deg)`
      };
      // this.coverBoxStyle.transform = this.contStyle.transform;
    },
    checkValid() {
      this.$emit("on-next", { imageRotate: this.picRotate });
    },
    pass() {
      this.$emit("on-next", { imageRotate: null });
    }
  }
};
</script>