博主:小猫娃来啦
文章核心:GitHub开源一个react封装的图片预览组件
Gitee:点此跳转下载
CSDN:点此跳转下载
GitHub:点此跳转下载
装依赖
npm i
运行
npm start
打开
http://localhost:3000/
ImageGallery
。
selectedImageUrl
来追踪当前选中的图片URL;
isOpen
来追踪模态框的显示状态;
zoomLevel
来追踪图片的缩放级别;
rotateDeg
来追踪图片的旋转角度;
flipState
来追踪图片的翻转状态等。
map()
方法遍历传入的图片URL数组,并为每个元素创建一个缩略图。为每个缩略图添加点击事件处理函数,以便在点击时更新selectedImageUrl
和isOpen
的状态。isOpen
的状态决定是否显示模态框。如果isOpen
为真,则显示模态框。zoomLevel
和rotateDeg
应用相应的样式来缩放和旋转图片。使用CSS的
transform
属性来实现缩放和旋转效果。
rotateDeg
和flipState
。Fullscreen API
来进入或退出全屏模式。我觉得react没有顺手的图片预览组件,然后就自己封装一个,放在项目文件里,自己本地导入使用,需要微调。也不用担心组件之间的高耦合度,自己也可以控制。
API
全部在代码里,手动微调即可。
拖拽,上下左右翻转、旋转,全屏,缩放,缩略图高亮
具体描述如下,缩放级别等数据可以自己改。在哪里改,都有注释,非常清晰
数据是在APP.jsx里的data,可以换成接口请求到的图片数组
数据入口是在APP.jsx里的<ImagePreview images={images}>
标签上,这个images就是data这个图片数组