在 web 前端开发中，图片是常见的一种资源。而在图片展示这一环节，就需要用到图片预览。如果每次都需要手动编写预览代码，那非常麻烦。于是我们可以使用 npm 包 images-preview，它提供一种简单易用的方式，用于在页面中实现多种图片预览模式。
本篇文章将详细介绍 images-preview 的使用，并提供示例代码，以供学习和使用。首先，我们需要将 images-preview 安装到我们的项目中：
npm install images-preview --save
安装完成后，我们需要在项目中引入 images-preview：
import ImagesPreview from 'images-preview';
基本使用
首先，我们看一下如何在页面中使用 ImagesPreview 对象的最基本功能：简单的图片预览。假设我们在页面中有这样一个图片列表：
<div class="image-list"> <img src="https://placekitten.com/200/200" alt="kitten1"> <img src="https://placekitten.com/250/200" alt="kitten2"> <img src="https://placekitten.com/300/300" alt="kitten3"> </div>
我们可以为这个图片列表绑定一个图片预览事件，当用户点击图片时，就可以在页面中显示出对应的大图。代码如下：
const preview = new ImagesPreview('.image-list img');
如上代码所示，我们调用了 ImagesPreview 的构造函数，并指定了需要绑定的 DOM 元素。这里我们使用了选择器 '.image-list img'，它表示选中所有 class 为 'image-list' 的元素中的所有 img 元素。
蒙层覆盖效果
在默认情况下，images-preview 将在页面的右下角显示预览图片。但是，有些时候，我们可能需要将预览图片以蒙层的形式覆盖整个页面。可以设置配置参数，将预览图片以蒙层形式覆盖整个页面。
const preview = new ImagesPreview('.image-list img', { showOnTop: true, animation: true, });
如上代码所示，我们在构造函数的第二个参数中传入了配置对象。showOnTop 属性设置为 true，表示将预览图片展示在页面的最上层。animation 属性设置为 true，则表示在展示之前启用动画效果。
键盘控制图片预览
有些用户喜欢用键盘来控制图片的预览，因此 images-preview 支持用户按键盘向左或向右键来切换图片。我们可以使用 ctrlKeys 和 arrowKeys 配置参数来自定义快捷键。
const preview = new ImagesPreview('.image-list img', { ctrlKeys: { left: true, right: true }, arrowKeys: true, });
在如上的配置中，我们启用了 ctrlKeys、arrowKeys，默认会启用图片查看模式快捷键 Ctrl + ←、Ctrl + → 和 ←、→。
手势控制图片预览
对于移动设备，手势控制图片预览可能更加自然和方便。同样也可以使用 images-preview 的 touch 属性来控制手势操作。当 touch 属性设置为 true 时，用户可以通过滑动手指来浏览图片。
const preview = new ImagesPreview('.image-list img', { touch: true, });
现在，用户可以使用手势左右滑动，来切换图片预览。
结语
images-preview 可以让图片预览变得简单易用。我们只需要在项目中引入 images-preview，然后为需要实现预览效果的图片，绑定 images-preview 的事件处理函数即可。
本文介绍了如何使用 images-preview 的基本功能以及如何配置 images-preview 来实现更加丰富的图片预览效果。当然，images-preview 还有更多的功能，你可以通过官方文档来进行深入学习和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/106883
