图片预览旋转按钮

<img
        width="100%"
        :src="dialogImageUrl"
        alt=""
        ref="imgInfo"
        @click="goimg(dialogImageUrl)"
      />
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          width: 100px;
        "
      >
        <i
          class="el-icon-refresh-right"
          style="font-size: 28px; cursor: pointer"
          @click="translateR"
        ></i>
        <i
          class="el-icon-refresh-left"
          style="font-size: 28px; cursor: pointer"
          @click="translateL"
        ></i>
      </div>

  data() {
    return {
      deg:0
    }
  }
methods:{
    //右转
     translateR() {
      this.deg += 90
      if (this.deg >= 360) {
        this.deg = 0
      }
      this.$refs.imgInfo.style.transform = `rotate(${this.deg}deg)`
    },
    //左转
    translateL() {
      if (this.deg <= 0) {
        this.deg = 360
      }
      this.deg += -90
      this.$refs.imgInfo.style.transform = `rotate(${this.deg}deg)`
    },
}