一、需求:
在点击图片时,能预览大图,弹出一个包含旋转图片功能按钮的弹窗。用户可通过点击按钮实现对图片的旋转操作
二、思路:
-
点击图片预览:
- 用户通过点击图片触发预览功能。
- 接收图片的 URL,弹出一个模态框展示大图。
-
旋转图片功能:
- 在模态框内添加一个"旋转图片"按钮。
- 定义两个变量:
rotationAngle
用于记录当前旋转角度,rotationStep
设置为90度的常量,表示每次点击按钮旋转的角度。 - 创建点击事件,每次点击按钮时,将
rotationAngle
累加rotationStep
并进行模运算,确保角度在[0, 360) 范围内。 (计算方式:rotationAngle初始值:0 第一次点击:0 + 90 = 90;第二次点击:90 + 90 = 180; 第三次点击:180 + 90 = 270; 第四次点击:270 + 90 = 360。然后通过模运算变回 0 //依此类推,每次点击都会使 rotationAngle 递增,使用模运算 (%) 将结果限制在 [0, 360) 的范围内 //这意味着如果 rotationAngle.value 加上 rotationStep 后超过360,就会从0重新开始。这样可以确保旋转角度一直在0到359之间)
-
应用旋转角度到图片:
- 在图片的样式中使用动态样式绑定 ,通过 CSS 的
transform
属性将旋转角度应用到图片上。 - 例如,
style="{transform: 'rotate(' + rotateAngle + 'deg)'}"
,这样就能根据rotateAngle
的值动态旋转图片。
- 在图片的样式中使用动态样式绑定 ,通过 CSS 的
-
角度重置:
- 由于旋转角度是响应式变量,为了确保打开新图片时旋转角度重置为0,需要在点击"旋转图片"按钮的事件处理程序中将
rotationAngle
重置为0。这样,用户在预览大图时可以通过点击按钮实现旋转图片的功能,并且每次打开新图片时旋转角度都会被重置,确保用户体验的一致性
- 由于旋转角度是响应式变量,为了确保打开新图片时旋转角度重置为0,需要在点击"旋转图片"按钮的事件处理程序中将
三、代码如下:
<template>
<div class="rotate_wrap">
<p>vue3选择图片 预览图片</p>
<div v-for="(item,index) in imgList" :key="index">
<el-image style="width: 100px; height: 100px"
:src="item.url" :fit="fit" @click="openDialog(item.url)" />
</div>
<el-dialog
v-model="dialogVisible"
title="图片旋转功能"
width="15%"
:before-close="handleClose"
>
<el-image style="width: 200px; height: 200px"
:src="imgDialog" :fit="fit"
:style="{transform:`rotate(${rotateAngle}deg)`}"/>
<div>
<el-button type="warning" @click="rotateImage" >旋转图片</el-button>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { reactive } from "vue";
const imgList = reactive([
{ id:1,
url:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
},
{ id:2,
url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
},
{ id:3,
url:'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
},
{ id:4,
url:'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
},
{ id:5,
url:'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
},
{ id:6,
url:'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
},
]);
//弹框打开隐藏变量
const dialogVisible = ref(false);
//接收显示图片变量
const imgDialog = ref('');
//响应式角度变量
const rotateAngle = ref(0);
//常量90度
const rotateStep = 90;
//打开弹框
const openDialog = (url) => {
rotateAngle.value = 0; //旋转角度变量重置为0
dialogVisible.value = true; //打开弹框
imgDialog.value = url; //点击时拿到的图片地址
}
//旋转角度
const rotateImage = () => {
rotateAngle.value = (rotateAngle.value + rotateStep) % 360;
}
</script>
<style lang="scss" scoped>
.rotate_wrap {
padding: 20px;
}
</style>
四、效果如下: