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-dialogv-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; //旋转角度变量重置为0dialogVisible.value = true; //打开弹框imgDialog.value = url; //点击时拿到的图片地址
}
//旋转角度
const rotateImage = () => {rotateAngle.value = (rotateAngle.value + rotateStep) % 360; 
}
</script>
<style lang="scss" scoped>
.rotate_wrap {padding: 20px;
}
</style>

四、效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/669308.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【GameFramework框架】四、GameFramework框架内置模块

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 【GameFramework框架】系列教程目录&#xff1a; https://blog.csdn.net/q7…

问题:下列关于海关统计项目的表述,正确的有:A.进出境货物的统计重量和数量应以报关单位申报的重量和数 #笔记#职场发展#媒体

问题&#xff1a;下列关于海关统计项目的表述&#xff0c;正确的有&#xff1a;A&#xff0e;进出境货物的统计重量和数量应以报关单位申报的重量和数 下列关于海关统计项目的表述&#xff0c;正确的有&#xff1a; A&#xff0e;进出境货物的统计重量和数量应以报关单位申报的…

头歌C++语言之数学运算练习题(四)

目录 第1关:计算自行车踏板圆杆的最小半径 任务描述 编程要求 第2关:两条直线的夹角 任务描述 相关知识 setprecision(n) 编程要求 任务描述 相关知识

echarts使用之地图(五)

1 基本使用 百度地图 API : 使用百度地图的 api , 它能够在线联网展示地图 , 百度地图需要申请 ak 矢量地图 : 可以离线展示地图 , 需要开发者准备矢量地图数据。本文使用该方式。 json格式的数据如下&#xff1a; 格式参照&#xff1a;GeoJSON <!DOCTYPE html&…

element-plus 更换主题色

由于跟着官方文档可能出现报错[plugin:vite:css] [sass] Module loop: this module is already&#xff0c;于是写一份避坑指南。 1. 安装sass 基于vite的项目默认不支持css预处理器&#xff0c;需要开发者单独安装 npm i sass -D2. 准备定制化的样式文件 /* 只需要重写你需要…

Java实现数据可视化的智慧河南大屏 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 数据模块 A4.2 数据模块 B4.3 数据模块 C4.4 数据模块 D4.5 数据模块 E 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的数据可视化的智慧河南大屏&#xff0c;包含了GDP、…

spring boot bean的生命周期

spring boot bean的生命周期 Bean创建和销毁过程中调用的顺序Bean创建过程方法调用顺序Bean销毁过程方法调用顺序BeanPostProcessorBeanPostProcessor内部执行顺序BeanPostProcessor子类及其调用顺序相关因素 bean的扩展点ApplicationContextAwareApplicationContextInitialize…

泰克示波器(TBS2000系列)保存功能使用

目录 1.1 Save/Recall按钮1.2 保存动作1.3 文件格式1.4 保存 在使用示波器时&#xff0c;测量后的结果我们常常需要记录下来&#xff0c;大部分情况我们是拍照记录&#xff0c;单图像往往不清晰&#xff0c;这时使用示波器专用的保存功能&#xff0c;插入U盘即可保存&#xff0…

STM32--SPI通信协议(3)SPI通信外设

前言 硬件SPI&#xff1a;通过硬件电路实现&#xff0c;所以硬件SPI速度更快&#xff0c;有专门的寄存器和 库函数 &#xff0c;使用起来更方便。 软件SPI&#xff1a;也称模拟SPI&#xff0c;通过程序控制IO口电平模拟SPI时序实现&#xff0c;需要程序不断控制IO电平翻转&am…

【无标题】summarizations onMysql

how to clear the screen of mysql 1.1 !clear 1.2 ctrl l

二级C语言笔试1

(总分96,考试时间90分钟) 一、选择题 下列各题A)、B)、C)、D)4个选项中&#xff0c;只有1个选项是正确的。 1. 有以下程序&#xff1a; void sum(int a[]) a[0]a[-1]a[1]; main() int a[10]1,2,3,4,5,6,7,8,9,10; sum(&a[2]); printf(…

JAVA字节流的两个重要子类FileOutputStream、FileInputStream

字节流&#xff0c;字符集&#xff0c;字符流 因为它们都是抽象类&#xff0c;所以要学习它们的子类 字节流的结构: FileOutputStream 操作本地文件的字节输出流&#xff0c;可以把程序中的数据写入本地文件。 书写步骤&#xff1a; 创建字节输出流对象写数据释放资源 演示:…

C语言开发单片机为什么大多数都采用全局变量的形式?

C语言开发单片机为什么大多数都采用全局变量的形式&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C语言的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&…

STM32F4学习

F4系统架构 8个主控总线7个被控总线 主控总线 Cortex-M4内核 I总线Cortex-M4内核 D总线Cortex-M4内核 S总线DMA1存储器总线DMA2存储器总线DMA2外设总线以太网DMA总线USB OTG HS DMA总线 被控总线 内部FLASH ICode总线内部FLASH DCode总线主要内部SRAM1&#xff08;112KB&a…

【PostgreSQL内核学习(二十六) —— (共享数据缓冲区)】

共享数据缓冲区 概述共享数据缓冲区管理共享缓冲区管理的核心功能包括:共享数据缓冲区的组织结构初始化共享缓冲池BufferDesc 结构体InitBufferPool 函数如何确定请求的数据页面是否在缓冲区中?BufferTag 结构体RelFileNode 结构体ForkNumber 结构体ReadBuffer_common 函数怎…

【AI绘画+Midjourney平替】Fooocus:图像生成、修改软件(Controlnet原作者重新设计的UI+Windows一键部署)

代码&#xff1a;https://github.com/lllyasviel/Fooocus windows一键启动包下载&#xff1a;https://github.com/lllyasviel/Fooocus/releases/download/release/Fooocus_win64_2-1-831.7z B站视频教程&#xff1a;AI绘画入门神器&#xff1a;Fooocus | 简化SD流程&#xff0c…

【51单片机】开发板&开发软件(Keil5&STC-ISP)简介&下载安装破译传送门(1)

前言 大家好吖&#xff0c;欢迎来到 YY 滴单片机系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…

Windows如何安装Node.js环境并制作贪吃蛇小游戏分享好友远程访问

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

JAVA中的类变量

一、如何定义类变量 定义语法: 访问修饰符 static 数据类型 变量名&#xff1b; static 访问修饰符 数据类型 变量名&#xff1b; 注&#xff1a;访问修饰符应遵守相关访问权限 如何访问类变量 类名.类变量名 或者 对象名.类变量名 public class StaticVar {public stat…

redis(6)

文章目录 一、redis clusterRedis Cluster 工作原理Redis cluster 基本架构Redis cluster主从架构Redis Cluster 部署架构说明部署方式介绍 原生命令手动部署原生命令实战案例&#xff1a;利用原生命令手动部署redis cluster 实战案例&#xff1a;基于Redis 5 的redis cluster部…