vue3项目实现预览图片、旋转图片功能

一、需求：

在点击图片时，能预览大图，弹出一个包含旋转图片功能按钮的弹窗。用户可通过点击按钮实现对图片的旋转操作

二、思路：

1. 点击图片预览：

   • 用户通过点击图片触发预览功能。
   • 接收图片的 URL，弹出一个模态框展示大图。

2. 旋转图片功能：

   • 在模态框内添加一个“旋转图片”按钮。
   • 定义两个变量：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之间）

3. 应用旋转角度到图片：

   • 在图片的样式中使用动态样式绑定，通过 CSS 的 transform 属性将旋转角度应用到图片上。
   • 例如，style="{transform: 'rotate(' + rotateAngle + 'deg)'}"，这样就能根据 rotateAngle 的值动态旋转图片。

4. 角度重置：

   • 由于旋转角度是响应式变量，为了确保打开新图片时旋转角度重置为0，需要在点击“旋转图片”按钮的事件处理程序中将 rotationAngle 重置为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>

四、效果如下：