vue顺时针，逆时针旋转，水平，垂直镜像

<template>
  <div>
    <button @click="rotateClockwise">顺时针旋转</button>
    <button @click="rotateCounterclockwise">逆时针旋转</button>
    <button @click="mirrorHorizontally">水平镜像</button>
    <button @click="mirrorVertically">垂直镜像</button>
    <img :src="imageSrc" :style="imageStyle" alt="照片">
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const imageSrc = ref('https://pic.imgdb.cn/item/657163b7c458853aefc0040d.jpg');
    const rotationAngle = ref(0);
    const isMirroredHorizontal = ref(false);
    const isMirroredVertical = ref(false);
    const status = ref(false);

    const rotateClockwise = () => {
      status.value = !status.value;
      rotationAngle.value += 90;
    };

    const rotateCounterclockwise = () => {
      status.value = !status.value;
      rotationAngle.value -= 90;
    };

    const mirrorHorizontally = () => {
      isMirroredHorizontal.value = !isMirroredHorizontal.value;
    };

    const mirrorVertically = () => {
      isMirroredVertical.value = !isMirroredVertical.value;
    };

    const getMirrorTransform = computed(() => {
      let transform = '';
      if (status.value) {
        if (isMirroredHorizontal.value) {
          transform += 'scaleY(-1) ';
        }
        if (isMirroredVertical.value) {
          transform += 'scaleX(-1)';
        }
      } else {
        if (isMirroredHorizontal.value) {
          transform += 'scaleX(-1) ';
        }
        if (isMirroredVertical.value) {
          transform += 'scaleY(-1)';
        }
      }
      return transform;
    });

    const imageStyle = computed(() => {
      return {
        transform: `rotate(${rotationAngle.value}deg) ${getMirrorTransform.value}`
      };
    });

    return {
      imageSrc,
      imageStyle,
      rotateClockwise,
      rotateCounterclockwise,
      mirrorHorizontally,
      mirrorVertically
    };
  }
};
</script>

<style>
img {
  height: 300px;
  width: 200px;
}
</style>