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>

四、效果如下:

相关推荐
八月ouc25 分钟前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
苏琢玉29 分钟前
从 Hexo 到 Astro:重构我的个人博客
前端·hexo
Glommer31 分钟前
某音 Js 逆向思路
javascript·逆向
街尾杂货店&35 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈37 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生1 小时前
Css性能优化
前端·css
Holin_浩霖1 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 小时前
CSS属性继承与特殊值
前端·css
kevlin_coder2 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript