2024年06月16日 建站教程
在Vue的项目中，需要导入相关的库和组件。可以使用第三方库vue-img-rotate实现图片旋转功能。该库可以通过简单的调用实现图像旋转，不需要开发者自己编写旋转算法。
具体实现代码如下：
<template>
<div class="image-container">
<img ref="img" :src="/staticimage" />
</div>
<button @click="rotateLeft">逆时针旋转</button>
<button @click="rotateRight">顺时针旋转</button>
</template>
<script>
import imgRotate from 'vue-img-rotate';
export default {
data() {
return {
image: 'image/pic.jpg',
angle: 0
};
},
methods: {
rotateLeft() {
this.angle -= 90;
},
rotateRight() {
this.angle += 90;
}
},
computed: {
rotationStyle() {
return {
transform: `rotate(${this.angle}deg)`
}
}
},
components: {
imgRotate
}
}
</script>
<style>
.image-container {
width: 200px;
height: 200px;
overflow: hidden;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease-in-out;
}
</style>
本文链接：http://so.lmcjl.com/news/6675/