本文介绍如何使用 nt-image-viewer 这个 npm 包来实现网页图片的交互式预览，以及一些常用设置和潜在的问题。
安装
在终端中输入以下命令：
npm install nt-image-viewer --save
该操作会将 nt-image-viewer 以及所有依赖包下载并安装到项目中的 node_modules 目录下。
引入
在项目中需要引入该库，以便使用其中的类以及方法。
对于传统的（不使用打包工具）前端项目，可以通过以下方式引入：
<script src="./node_modules/nt-image-viewer/nt-image-viewer.min.js"></script>
对于使用 webpack 或其他打包工具的项目，可以在代码中直接引入：
import ImageViewer from 'nt-image-viewer';
使用
基本用法
要在网页中使用 nt-image-viewer，在页面中添加一个或多个图片元素，然后使用 new ImageViewer 来创建一个预览器实例。
<img src="my-image.jpg" class="my-image-class">
const viewer = new ImageViewer('.my-image-class');上述代码表示：当用户在页面中点击 class 属性为 my-image-class 的图片时，就会出现一个交互式的预览框，支持放大、缩小、拖动等操作。这个预览框会显示图片原始大小（如果用户在创建实例时没有指定其他缩放比例）。
如果需要实现多个图片元素的预览效果，可以传入选择器字符串，实现对多个元素的监听：
const viewer = new ImageViewer('.my-image-class, .other-image-class');模态框
nt-image-viewer 还支持在模态框中打开预览框，这比在页面中创建新的元素更加方便。
为此，你需要创建一个包含图片元素和实例化 nt-image-viewer 的方法的闭包。这个方法可以通过点击某个按钮或其他元素来触发。
<button id="my-button">Open image preview</button> <div id="my-modal" style="display: none;"></div>
-- -------------------- ---- -------
----- ------ - -
-
---- -----------------
------ ------ ---
---- ------ ---
--
-
---- -----------------
------ ------ ---
---- ------ ---
--
--
----- ----------------- - ------- -- -
----- --- - ------------------------------
------- - ----------
--------- - ------------
------- - ----------
------ --- -----------------
--
----- ---------------------- - ------- -- -
----- ----- - ------------------------------------
----- ------ - -------------------------
------------------------------------
------------------- - --------
--
-------------------------------------------------------------- -- -- -
---------------------- -- -
------------------------------
---
---上面代码中，createImageViewer 方法创建一个新的 nt-image-viewer 实例，并将其包装在一个返回元素的函数中。openImageViewerInModal 方法将创建好的预览框包装在一个模态框中，并设置其样式为 display: block。
需要注意的是，当模态框中的 nt-image-viewer 实例被关闭时，需要把它的 DOM 元素从文档中删除，否则会对下一次打开造成影响。
可配置选项
在创建新的 nt-image-viewer 实例时，还可以传入一些可配置选项，例如：
const viewer = new ImageViewer('img', {
zoomValue: 1.5,
maxZoom: 3,
});上述代码表示 zoomValue 的值将设置为默认缩放值的 1.5 倍，最大缩放值将被限制在 3 倍以内（如果不进行任何限制，用户将能够缩放到任何大小）。
zoomValue：设置默认缩放比例，默认值为 1。minZoom和maxZoom：设置最小和最大缩放比例，以防止用户缩放到非常小或非常大的级别。panOnClick：设置是否在点击图片时启用拖曳功能，默认值为true。panOnMouseMove：设置是否允许鼠标滚动或拖拽时拖曳图片，默认值为true。zoomOnDoubleClick：设置是否允许双击图片进行缩放，默认值为true。loadingMessage：在图片加载时显示的消息文本。默认值为Loading...。onOpen和onClose：在打开或关闭预览框时触发。这两个方法需要接受一个函数作为参数，该函数将在事件发生时被调用。
与 Vue.js 集成
如果您的项目是使用 Vue.js 框架的，则可以将 nt-image-viewer 包装在组件中，以允许更好的重用和维护。
要在组件中使用 nt-image-viewer，需要在生命周期中创建实例、监听事件和销毁实例。下面是一个示例组件的基本结构：
-- -------------------- ---- -------
----------
-----
---- --- ----- ------- ---
---- ---------- ----------- ----------- --------------------------
---- --- ----- ------- ---
---- ------------- ---------------- --------------------------------
---- ----------------------
---- ---------------------------
------
------
------
-----------
--------
------ ----------- ---- ------------------
------ ------- -
----- -----------------
------ -
---- -
----- -------
--------- -----
--
--
------ -
------ -
---------- ------
------- -----
--
--
-------- -
------------------ -
-------------- - -----
----------------- -- -
-- ------ --- ----- ------ --------
----------- - --- ------------------------------
-- ------ --- ------ --------- -- --- -----
-------------------------------------------------------------
---
--
------------------- -
-------------- - ------
-- ------- --- ----- ------ --------
----------------------
--
--
--
---------上述组件定义了一个 src 属性，用于渲染图片，以及一个 showModal 状态来控制模态框的展示。openImagePreview 方法用于在点击图片时打开模态框，并创建一个新的 nt-image-viewer 实例；closeImagePreview 方法则负责将模态框关闭并销毁该实例。
要在其他组件中使用这个 ImagePreviewer 组件，只需要在模板中添加一个这样的标签：
-- -------------------- ---- -------
----------
-----
--------------- ------------------------------------
------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
----------- -
---------------
--
--
---------总结
通过使用 nt-image-viewer，我们可以方便地为网页中的图片添加交互式预览功能，支持缩放、拖拽等交互。我们可以轻松地将 nt-image-viewer 与 Vue.js 以及其他前端框架一起使用，从而实现更复杂的交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f943d1de16d83a66c35