vue点击按钮实现图片旋转

最新推荐文章于 2024-07-03 14:05:29 发布

别undefined辣

最新推荐文章于 2024-07-03 14:05:29 发布

阅读量411

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2201_75568521/article/details/134403967

版权

<template>
  <div>
    <!-- 控制旋转图片样式 -->
  <img
     :style="{
      ...styleImg,
       width: `${w}px`,
       height: `${h}px`,
     }"
       src="https://ts1.cn.mm.bing.net/th/id/R-C.4909aa42dd7c594716632b97f1f18618?rik=HMYl7AI4kVNajg&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f200912%2f20091223150532446.jpg&ehk=FScUCbGto5iQGiYuMmbcfs3IQo4mwvkcqSDs%2bJrXAnU%3d&risl=&pid=ImgRaw&r=0"
       alt=""
       ref="imagePig"
       class="imge"
        />

<div style=" display: flex; margin-top: 200px; justify-content: space-between; width: 400px;">
  <button @click="rotate_left" style="width: 100px;height: 100px; font-size: 16px;">左旋转</button>
<button @click="rotates_right"  style="width: 100px;height: 100px; font-size: 16px;">右旋转</button>
</div>

</div>
</template>

<script lang="ts" setup>
import {reactive,ref} from 'vue'
 // 旋转
const styleImg = reactive({
  transform: "",
  transition: "",
});
// 设置宽高
const w =ref('400')
const h =ref('400')
// 逆时针旋转
const deg = ref(0);
const rotate_left = () => {
  if (degs.value != 0) {
    degs.value -= 90;
    styleImg.transform = `rotateZ(${degs.value}deg) scale(1.2)`;
    styleImg.transition = "0.5s";
  } else if (degs.value == 0) {
    deg.value += 90;
    styleImg.transform = `rotateZ(${-deg.value}deg) scale(1.2)`;
    styleImg.transition = "0.5s";
  }
};
// 正时针旋转
const degs = ref(0);
const rotates_right = () =>{
  if (deg.value != 0) {
    deg.value -= 90;
    styleImg.transform = `rotateZ(${-deg.value}deg) scale(1.2)`;
    styleImg.transition = "0.5s";
  } else if (deg.value == 0) {
    degs.value += 90;
    styleImg.transform = `rotateZ(${degs.value}deg) scale(1.2)`;
    styleImg.transition = "0.5s";
  }
};
</script>