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>

四、效果如下:

相关推荐
有梦想的刺儿6 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具27 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro