介绍
image-album-preview 是一个基于 React 的图片预览组件，可轻松地在您的项目中添加图像预览功能。该组件包含许多定制选项，既可以在桌面浏览器上使用，也可以在移动设备上使用。
安装
通过 NPM 安装 image-album-preview：
npm install image-album-preview --save
使用方法
引入组件后，您可以简单地将其包含在您的代码中，例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------------- ---- ----------------------
----- ----------- ------- --------- -
-------- -
------ -
------------------
---------
- ---- ----------------------- ------ ------ -- --
- ---- ----------------------- ------ ------ -- --
- ---- ----------------------- ------ ------ -- --
--
--
--
-
-上面的代码将会在页面中渲染出一个包含三张图片的图像预览器。
API
组件属性
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| images | Array | [] | 图像数组，每个元素包含一个字符串 src 属性和一个可选的字符串 label 属性，用于显示图像的标题。 |
| styles | Object | {} | 自定义样式对象，用于覆盖组件的默认样式。 |
| onClose | Func | null | 回调函数，当用户关闭预览器并且所有动画完成时将被调用。 |
| onClose | Func | null | 回调函数，当用户关闭预览器并且所有动画完成时将被调用。 |
| onOpen | Func | null | 回调函数，当用户打开预览器并且所有动画完成时将被调用。 |
| onPause | Func | null | 回调函数，当用户在预览器中暂停 GIF 时将被调用。 |
| onPlay | Func | null | 回调函数，当用户在预览器中播放 GIF 时将被调用。 |
| onNext | Func | null | 回调函数，当用户下一个图片时将被调用，第一个参数为当前图像的索引。 |
| onPrev | Func | null | 回调函数，当用户上一个图片时将被调用，第一个参数为当前图像的索引。 |
| onIndexChange | Func | null | 回调函数，当用户滚动预览器以改变当前索引时，将调用此函数。参数包括当前索引、前一个索引和下一个索引。 |
| startIndex | Number | 0 | 预览开始的图像的索引。 |
| startOpen | Boolean | false | 图像预览器是否应在组件渲染时打开。 |
| preloadNextImage | Boolean | true | 预览器是否预加载下一张图片。 |
| showThumbnails | Boolean | true | 是否显示缩略图。 |
| showArrows | Boolean | true | 是否显示箭头。 |
| showButton | Boolean | true | 是否显示“关闭”按钮。 |
| showIndex | Boolean | true | 是否显示当前图像的索引。 |
| showNav | Boolean | true | 是否显示导航。 |
| showPlayButton | Boolean | false | 是否显示“播放”按钮。 |
| disableScroll | Boolean | false | 是否禁止在预览器中使用滚动条。 |
方法
您可以使用 ref 引用 ImageAlbumPreview 组件，并调用以下方法：
open(index?: number)
打开图像预览器，可选地将其指向传递的索引。
close()
关闭图像预览器。
next()
显示下一个图像。
prev()
显示上一个图像。
pause()
暂停 GIF 播放。
play()
播放 GIF。
goTo(index: number)
显示指定的图像。
示例代码
基础使用
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------------- ---- ----------------------
----- ----------- ------- --------- -
-------- -
------ -
------------------
---------
- ---- ----------------------- ------ ------ -- --
- ---- ----------------------- ------ ------ -- --
- ---- ----------------------- ------ ------ -- --
--
--
--
-
-自定义样式
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------------- ---- ----------------------
----- ----------- ------- --------- -
-------- -
----- ----------- - -
------------------ -
-------- -------
--
------- -
---------------- -------
------ -------
--
--
------ -
------------------
---------
- ---- ----------------------- ------ ------ -- --
- ---- ----------------------- ------ ------ -- --
- ---- ----------------------- ------ ------ -- --
--
--------------------
--
--
-
-组合其他组件使用
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- ------------
------ -----------------------------
------ ----------------- ---- ----------------------
----- ----------- ------- --------- -
----- - -
-------- ------
--
------- - -- -- -
---------------
-------- ------
---
--
----------- - -- -- -
---------------
-------- -----
---
--
-------- -
------ -
--
------- ------------------------------- --------------
-------
----------------------------
------------ ----- --------
----------------------
-
------------------
---------
- ---- ----------------------- ------ ------ -- --
- ---- ----------------------- ------ ------ -- --
- ---- ----------------------- ------ ------ -- --
--
----------------------
--
---------
---
--
-
-结论
通过本教程，您现在已经学会了如何使用 image-album-preview 组件，以及如何自定义样式和回调函数。您可以在自己的项目中使用这个组件，让您的图片数据更加有吸引力。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595d81e8991b448d6c3b