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。这样，用户在预览大图时可以通过点击按钮实现旋转图片的功能，并且每次打开新图片时旋转角度都会被重置，确保用户体验的一致性

三、代码如下：

四、效果如下：