前端(十五)——开源一个用react封装的图片预览组件

这篇具有很好参考价值的文章主要介绍了前端(十五)——开源一个用react封装的图片预览组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端(十五)——开源一个用react封装的图片预览组件,JS高阶篇,react,开源/封装,前端,github,开源

👵博主:小猫娃来啦
👵文章核心:开源一个react封装的图片预览组件

组件开源代码下载地址

Gitee:点此跳转下载
CSDN:点此跳转下载




运行

装依赖

npm i   

运行

npm start

打开

http://localhost:3000/



效果展示

前端(十五)——开源一个用react封装的图片预览组件,JS高阶篇,react,开源/封装,前端,github,开源前端(十五)——开源一个用react封装的图片预览组件,JS高阶篇,react,开源/封装,前端,github,开源




实现思路

  • 创建一个React函数组件并命名为ImageGallery
  • 在组件内部,使用useState钩子来定义状态变量,并初始化为合适的初始值。

selectedImageUrl来追踪当前选中的图片URL;
isOpen来追踪模态框的显示状态;
zoomLevel来追踪图片的缩放级别;
rotateDeg来追踪图片的旋转角度;
flipState来追踪图片的翻转状态等。

  • 渲染组件时,使用map()方法遍历传入的图片URL数组,并为每个元素创建一个缩略图。为每个缩略图添加点击事件处理函数,以便在点击时更新selectedImageUrlisOpen的状态。
  • 在模态框中,根据isOpen的状态决定是否显示模态框。如果isOpen为真,则显示模态框。
  • 在模态框中,显示选中的大图。根据zoomLevelrotateDeg应用相应的样式来缩放和旋转图片。

使用CSS的transform属性来实现缩放和旋转效果。

  • 在模态框中,添加放大、缩小、旋转和翻转的功能按钮。为每个按钮添加点击事件处理函数,以便在点击时更新相应的状态变量,如zoomLevel、rotateDegflipState
  • 为模态框添加键盘事件监听。根据按下的键码来触发不同的操作,例如切换图片、放大缩小等功能。
  • 实现拖拽功能,通过鼠标事件监听鼠标按下、移动和松开的过程,在对应的事件处理函数中计算鼠标位移距离,并更新图片的位置。
  • 添加全屏展示功能。为模态框添加全屏按钮,并在点击时调用浏览器的Fullscreen API来进入或退出全屏模式。



使用思路和api

我觉得react没有顺手的图片预览组件,然后就自己封装一个,放在项目文件里,自己本地导入使用,需要微调。也不用担心组件之间的高耦合度,自己也可以控制。

API全部在代码里,手动微调即可。




实现的功能

拖拽,上下左右翻转、旋转,全屏,缩放,缩略图高亮
具体描述如下,缩放级别等数据可以自己改。在哪里改,都有注释,非常清晰

  • 点击缩略图可以在模态框中展示选中的图片,并带有高亮。
  • 可以放大和缩小图片,最大放大到130%,最小缩小到30%。
  • 可以旋转图片,左旋转和右旋转分别是每次旋转90度。
  • 可以上下翻转和水平翻转图片,点击按钮可以进行翻转和恢复默认状态。
  • 可以使用键盘的箭头键进行上一张和下一张图片的切换,同时也支持使用键盘的上下箭头进行放大和缩小。
  • 可以通过拖拽图片进行位置的调整,鼠标按下开始拖拽,松开结束拖拽。
  • 可以进入全屏模式查看图片,再次点击退出全屏。
  • 在模态框中显示缩略图,点击缩略图可以切换到相应的图片。



数据和入口

数据是在APP.jsx里的data,可以换成接口请求到的图片数组
数据入口是在APP.jsx里的<ImagePreview images={images}></ImagePreview>标签上,这个images就是data这个图片数组

前端(十五)——开源一个用react封装的图片预览组件,JS高阶篇,react,开源/封装,前端,github,开源




部分代码展示

⭐⭐⭐⭐⭐css
前端(十五)——开源一个用react封装的图片预览组件,JS高阶篇,react,开源/封装,前端,github,开源




⭐⭐⭐⭐⭐jsx
前端(十五)——开源一个用react封装的图片预览组件,JS高阶篇,react,开源/封装,前端,github,开源

前端(十五)——开源一个用react封装的图片预览组件,JS高阶篇,react,开源/封装,前端,github,开源

前端(十五)——开源一个用react封装的图片预览组件,JS高阶篇,react,开源/封装,前端,github,开源

前端(十五)——开源一个用react封装的图片预览组件,JS高阶篇,react,开源/封装,前端,github,开源

前端(十五)——开源一个用react封装的图片预览组件,JS高阶篇,react,开源/封装,前端,github,开源文章来源地址https://www.toymoban.com/news/detail-686332.html


到了这里,关于前端(十五)——开源一个用react封装的图片预览组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包