简介
react-image-lightbox-rotate 是一个基于 React 的图片浏览组件，它支持图片预览、旋转、缩放、拖动等操作，提供了更好的用户体验和视觉效果。本文将介绍如何使用该 npm 包，并给出一些示例代码和指导意义，提供给前端开发者参考和学习。
安装
使用 npm 命令可轻松安装 react-image-lightbox-rotate：
npm install --save react-image-lightbox-rotate
使用
以下是该组件最基本的使用方法：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------------- ---- ------------------------------
----- ------ - -
-
---- ---------------------
------ -----
------- ----
--
-
---- ---------------------
------ -----
------- ----
--
--
-------- ----- -
----- -------- ---------- - ----------------
----- ------- --------- - ------------
------ -
--
------- ----------- -- --------------------- -----------------
--------------------
---------------
---------------
----------- -- -----------------
--------------------
-------------------------------
--
---
--
-
------ ------- ----该示例中，首先导入组件，然后创建一个包含两个图片的数组，它们包含了图片的路径、宽度和高度信息。接着，在 App 组件中，定义两个状态 isOpen 和 index，前者表示灯箱是否打开，后者表示当前选中的图片索引。在点击 “Open Lightbox” 按钮时，将 isOpen 状态设为 true，从而打开灯箱。最后，使用 ImageLightboxRotate 组件，并将图片数组、状态、回调函数作为 props 传入。
除了基本用法，该组件还提供了一些可选的 props 和回调函数，下面将逐一介绍。
props
| prop | 类型 | 必须 | 描述 |
|---|---|---|---|
| images | Array<object> | 是 | 图片数组，每个元素包含以下字段： - src (string)：图片路径 (必须)- width (number)：图片宽度 (可选)- height (number)：图片高度 (可选) |
| isOpen | boolean | 是 | 灯箱是否打开 |
| onClose | function | 是 | 关闭灯箱的回调函数 |
| currentIndex | number | 否 | 当前选中的图片索引 |
| onCurrentIndexChange | function | 否 | 选中图片改变时的回调函数 |
| imageLoadErrorMessage | string | 否 | 图片加载失败时的错误消息 |
| imageLoadErrorHandler | function | 否 | 图片加载失败时的回调函数 |
| toolbarButtons | Array<element> | 否 | 工具栏自定义按钮，需传入 React 元素列表 |
| renderHeader | function | 否 | 自定义头部，在默认头部上覆盖内容 |
| renderFooter | function | 否 | 自定义底部，在默认底部上覆盖内容 |
| reactModalStyle | object | 否 | React Modal 样式，需传入样式对象 |
| wrapperClassName | string | 否 | 包含组件的容器类名 |
| enableRotate | boolean | 否 | 是否启用图片旋转操作 |
| enableZoom | boolean | 否 | 是否启用图片缩放操作 |
| enablePanning | boolean | 否 | 是否启用图片拖动操作 |
| imageLoadOnClick | boolean | 否 | 是否在点击图片时加载，而不是在打开灯箱时加载。默认为 false。 |
| discourageDownloads | boolean | 否 | 是否禁止下载图片。默认为 false。 |
| discourageClose | boolean | 否 | 是否禁止关闭灯箱。默认为 false。 |
| reactModalProps | object | 否 | React Modal props，传入 isOpen、onClose 和 style 时不需要这个 prop。 |
| leftArrowTitle | string | 否 | 向左箭头的标题。默认为 “Previous (Left arrow key)” |
| rightArrowTitle | string | 否 | 向右箭头的标题。默认为 “Next (Right arrow key)” |
| zoomInTitle | string | 否 | 放大按钮的标题。默认为 “Zoom in (+)” |
| zoomOutTitle | string | 否 | 缩小按钮的标题。默认为 “Zoom out (-)” |
| closeTitle | string | 否 | 关闭按钮的标题。默认为 “Close (Esc)” |
| fullscreenTitle | string | 否 | 全屏按钮的标题。默认为 “Toggle fullscreen (F)” |
| rotateLeftTitle | string | 否 | 左旋转按钮的标题。默认为 “Rotate left (L)” |
| rotateRightTitle | string | 否 | 右旋转按钮的标题。默认为 “Rotate right (R)” |
| zoomInShortcut | string | 否 | 放大按钮的快捷键。默认为 CTRL++ |
| zoomOutShortcut | string | 否 | 缩小按钮的快捷键。默认为 CTRL+- |
| nextSrcShortcut | string | 否 | 下一张图片的快捷键。默认为 Right arrow |
| prevSrcShortcut | string | 否 | 上一张图片的快捷键。默认为 Left arrow |
| closeShortcut | string | 否 | 关闭灯箱的快捷键。默认为 Esc |
| zoomEnabled | boolean | 否 | 是否启用鼠标滚轮缩放图片。默认为 true。 |
| moveSpeed | number | 否 | 图片移动速度。默认值为 0.025。 |
| moveSpeedByWheel | number | 否 | 鼠标滚轮移动时的速度。默认值为 0.025。 |
| clickOutsideToClose | boolean | 否 | 在灯箱外点击时是否关闭灯箱。默认为 true。 |
| prevSrcButton | element | 否 | 上一张图片的按钮，需传入一个 React 元素。默认为一个箭头。 |
| nextSrcButton | element | 否 | 下一张图片的按钮，需传入一个 React 元素。默认为一个箭头。 |
| zoomInButton | element | 否 | 放大按钮，需传入一个 React 元素。默认为 “+”。 |
| zoomOutButton | element | 否 | 缩小按钮，需传入一个 React 元素。默认为 “-”。 |
| closeButton | element | 否 | 关闭按钮，需传入一个 React 元素。默认为一个 X 号。 |
| fullscreenButton | element | 否 | 全屏按钮，需传入一个 React 元素。默认为 “F”。 |
| rotateLeftButton | element | 否 | 左旋转按钮，需传入一个 React 元素。默认为一个箭头。 |
| rotateRightButton | element | 否 | 右旋转按钮，需传入一个 React 元素。默认为一个箭头。 |
回调函数
| 回调函数 | 参数 | 描述 |
|---|---|---|
| onClose | 无 | 关闭灯箱时的回调函数 |
| onCurrentIndexChange | index |
选中图片改变时的回调函数，参数 index 表示当前选中的图片索引 |
| onMovePrevRequest | index |
请求移动到上一张图片时的回调函数，参数 index 表示当前选中的图片索引。如果删除该参数，ImageLightboxRotate 组件将禁用向左滚动的快捷键 |
| onMoveNextRequest | index |
请求移动到下一张图片时的回调函数，参数 index 表示当前选中的图片索引。如果删除该参数，ImageLightboxRotate 组件将禁用向右滚动的快捷键 |
| onRotateLeftRequest | index |
请求向左旋转图片时的回调函数，参数 index 表示当前选中的图片索引。如果删除该参数，ImageLightboxRotate 组件将禁用图像旋转功能 |
| onRotateRightRequest | index |
请求向右旋转图片时的回调函数，参数 index 表示当前选中的图片索引。如果删除该参数，ImageLightboxRotate 组件将禁用图像旋转功能 |
| onZoomInRequest | event |
请求放大图片时的回调函数，参数 event 为鼠标事件 |
| onZoomOutRequest | event |
请求缩小图片时的回调函数，参数 event 为鼠标事件 |
| onAfterOpen | 无 | 打开灯箱时的回调函数 |
| onBeforeClose | 无 | 关闭灯箱前的回调函数 |
| onImageLoadError | event |
图片加载失败时的回调函数，参数 event 为事件对象，其中包含了当前加载失败的图片对象 |
| onImageLoad | event |
图片加载成功时的回调函数，参数 event 为事件对象，其中包含了当前加载成功的图片对象 |
| onImageLoadStart | event |
图片开始加载时的回调函数，参数 event 为事件对象，其中包含了当前开始加载的图片对象 |
| onClickImage | event |
单击图片时的回调函数，参数 event 为鼠标事件 |
| onClickNext | event |
点击下一张图片的回调函数，参数 event 为鼠标事件 |
| onClickPrev | event |
点击上一张图片的回调函数，参数 event 为鼠标事件 |
| onClickThumbnail | index |
点击缩略图的回调函数，参数 index 表示当前选中的图片索引 |
| onDoubleClickThumbnail | index |
双击缩略图的回调函数，参数 index 表示当前选中的图片索引 |
| onMouseEnter | event |
鼠标进入灯箱时的回调函数，参数 event 为鼠标事件 |
| onMouseLeave | event |
鼠标离开灯箱时的回调函数，参数 event 为鼠标事件 |
| onZoomChange | zoom |
缩放比例改变时的回调函数，参数 zoom 表示当前缩放比例 |
| onImageClick | imageSrc |
单击图片时的回调函数，参数 imageSrc 表示当前选中的图片路径 |
| onButtonElementClick | id |
点击按钮元素时的回调函数，参数 id 表示当前按钮的 ID |
示例
下面是一些可能有帮助的示例。
自定义按钮
-- -------------------- ---- -------
------ ------ - --------- ------ - ---- --------
------ ------------------- ---- ------------------------------
------ - ----------- ---------- ---------- - ---- -----------------
----- ------ - -
- ---- --------------------- ------ ----- ------- --- --
- ---- --------------------- ------ ----- ------- --- --
- ---- --------------------- ------ ----- ------- --- --
--
-------- ----- -
----- -------- ---------- - ----------------
----- ------- --------- - ------------
----- -------- - -------------
----- ---------------- - -- -- -
-- ------------------ -
------------------------------
-
--
----- ----------------- - -- -- -
-- ------------------ -
-------------------------------
-
--
----- -------------- - -- -- -
----- --- - ------------------
----- ---- - ----------------------------
--------------------------- ----------
------------------------- -----
-------------
--
----- -------------- - -
------- ----------------- ---------------------------
------ ----
----------
------- ------------------ ----------------------------
------ -----
----------
------- -------------- -------------------------
----------- --
----------
--
------ -
--
------- ----------- -- --------------------- -----------------
--------------------
---------------
---------------
----------- -- -----------------
--------------------
-------------------------------
-------------------------------
--------------
-------------------
-----------------
--------------------
----------------------
--
---
--
-
------ ------- ----渲染自定义元素
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------------- ---- ------------------------------
----- ------ - -
-
---- ---------------------
------ -----
------- ----
--
-
---- ---------------------
------ -----
------- ----
--
--
-------- ----- -
----- -------- ---------- - ----------------
----- ------- --------- - ------------
----- ------------ - -- ---------------- -- -- -
---- -------- ---------- -------- ---
------- ------------------------------------- -------------------
------
--
----- ------------ - -- -------------- -- -- -
---- -------- ---------- ------- ---
------- ---------------------------------------
------
--
------ -
--
------- ----------- -- --------------------- -----------------
--------------------
---------------
---------------
----------- -- -----------------
--------------------
-------------------------------
---------------------------
---------------------------
--
---
--
-
------ ------- ----总结
本文介绍了 react-image-lightbox-rotate 这个 npm 包的用法和示例，希望能够帮助前端开发者更好地了解并使用该组件，提高自己的技术水平和代码质量。在实际项目中，可以根据需求进行灵活的配置和扩展，打造出更好的图片浏览体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737f81e8991b448e971c