当前位置：首页 > VUE

vue实现点击旋转图片

2026-02-22 04:26:54VUE

实现点击旋转图片的Vue方法

使用CSS transform属性

在Vue组件中绑定样式，通过点击事件改变旋转角度：

<template>
  <img 
    :style="{ transform: `rotate(${rotateDeg}deg)` }" 
    @click="rotateImage"
    src="your-image-path.jpg"
  >
</template>

<script>
export default {
  data() {
    return {
      rotateDeg: 0
    }
  },
  methods: {
    rotateImage() {
      this.rotateDeg += 90
    }
  }
}
</script>

使用CSS类名切换

定义多个旋转角度的CSS类，通过点击切换类名：

<template>
  <img 
    :class="rotationClass" 
    @click="rotateImage"
    src="your-image-path.jpg"
  >
</template>

<script>
export default {
  data() {
    return {
      rotationIndex: 0,
      rotationClasses: ['rotate-0', 'rotate-90', 'rotate-180', 'rotate-270']
    }
  },
  computed: {
    rotationClass() {
      return this.rotationClasses[this.rotationIndex]
    }
  },
  methods: {
    rotateImage() {
      this.rotationIndex = (this.rotationIndex + 1) % 4
    }
  }
}
</script>

<style>
.rotate-0 { transform: rotate(0deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(270deg); }
</style>

使用CSS过渡动画

为旋转添加平滑过渡效果：

<template>
  <img 
    :style="{ transform: `rotate(${rotateDeg}deg)` }" 
    @click="rotateImage"
    src="your-image-path.jpg"
    class="rotatable-image"
  >
</template>

<script>
export default {
  data() {
    return {
      rotateDeg: 0
    }
  },
  methods: {
    rotateImage() {
      this.rotateDeg += 90
    }
  }
}
</script>

<style>
.rotatable-image {
  transition: transform 0.3s ease;
}
</style>

使用第三方动画库

安装并引入vue-use-gesture等动画库实现更复杂的交互效果：

npm install @vueuse/gesture

<template>
  <img 
    ref="imageRef"
    src="your-image-path.jpg"
    class="rotatable-image"
  >
</template>

<script>
import { useGesture } from '@vueuse/gesture'

export default {
  setup() {
    const imageRef = ref(null)
    const rotateDeg = ref(0)

    useGesture(imageRef, {
      onClick: () => {
        rotateDeg.value += 90
        imageRef.value.style.transform = `rotate(${rotateDeg.value}deg)`
      }
    })

    return { imageRef }
  }
}
</script>

vue实现点击旋转图片