前言
在前端开发过程中，展示图片是一个很基础的需求。但在某些场景下，我们需要更加灵活的方式来展示图片。这时候，vue2-images-preview 这个 npm 包就可以派上用场了。
vue2-images-preview 是一个基于 Vue.js 2.x 的图片预览和缩放组件。它支持 PC 和移动端，而且提供了丰富的配置项和自定义模板的功能。它还支持键盘操作，并提供多语言支持。下面我们就来详细介绍一下如何使用这个组件。
安装
首先，我们需要使用 npm 命令来安装这个组件：
npm install vue2-images-preview --save
使用方法
vue2-images-preview 组件可以在全局或局部注册。下面我们分别来介绍这两种使用方式。
全局注册
在全局注册的方式中，我们需要在 main.js 中引入 vue2-images-preview 组件，并使用 Vue.use() 方法将其注册为 Vue 的插件。
import Vue from 'vue' import VueImagesPreview from 'vue2-images-preview' import 'vue2-images-preview/dist/styles.css' Vue.use(VueImagesPreview)
然后就可以在任何组件中使用 Vue.component() 方法来声明并使用 VueImagesPreview 组件了：
-- -------------------- ---- -------
----------
-----
------------------- ----------------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
----------- -
- ---- --------------------------- ---- ------ -- --
- ---- --------------------------- ---- ------ -- --
- ---- --------------------------- ---- ------ -- -
-
-
-
-
---------在上面的例子中，我们将 VueImagesPreview 组件声明为局部组件，并传递了一个 imagesList 数组参数，用来指定需要预览的图片列表。每个数组元素包含两个属性：src 表示图片的地址，alt 表示图片的描述信息。
局部注册
如果你只想在某个组件中使用 VueImagesPreview 组件，可以使用局部注册的方式：
-- -------------------- ---- -------
----------
-----
------------------- ----------------------------------------
------
-----------
--------
------ ---------------- ---- ---------------------
------ -------------------------------------
------ ------- -
----------- -
----------------
--
------ -
------ -
----------- -
- ---- --------------------------- ---- ------ -- --
- ---- --------------------------- ---- ------ -- --
- ---- --------------------------- ---- ------ -- -
-
-
-
-
---------在局部注册中，我们首先需要在 <script> 标签中引入 VueImagesPreview 组件，然后再通过 components 属性将其注册为局部组件。
配置项
vue2-images-preview 提供了丰富的配置项，用于定制组件的各种属性和行为。下面列举了一些比较常用的配置项：
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| list | Array | [] | 需要预览的图片列表，每个元素包含 src 和 alt 两个属性 |
| index | Number | 0 | 预览窗口中显示的图片索引号 |
| zoomOptions | Object | { step: 0.1, min: 0.2, max: 4 } | 图片缩放的相关参数，包括缩放步长、最小缩放比例和最大缩放比例 |
| preloadImages | Boolean | true | 是否预加载图片，如果设置为 false，则只有当用户进入预览模式时才会开始加载图片 |
| showThumbnails | Boolean | true | 是否显示缩略图视图 |
| hideToolbar | Boolean | false | 是否隐藏工具栏 |
| hideZoomBtns | Boolean | false | 是否隐藏缩放按钮 |
| hideRotateBtns | Boolean | false | 是否隐藏旋转按钮 |
| hideFullscreen | Boolean | false | 是否隐藏全屏按钮 |
| disableDrag | Boolean | false | 是否禁用拖拽模式 |
| disableWheel | Boolean | false | 是否禁用鼠标滚轮缩放 |
| useKeyboard | Boolean | true | 是否开启键盘操作模式 |
| closeOnEsc | Boolean | true | 是否在按下 ESC 键时关闭预览窗口 |
| showCaption | Boolean | true | 是否显示图片描述信息 |
| captionType | String | 'attr' | 图片描述信息的类型，可以是 'attr' 表示使用 alt 属性值，也可以是 'data' 表示使用自定义 data-caption 属性值 |
| captionDelay | Number | 0 | 图片描述信息显示的延迟时间，单位毫秒 |
| zIndex | Number | 2000 | 预览窗口的 z-index 值 |
| closeOnBackdrop | Boolean | true | 是否在点击背景层时关闭预览窗口 |
| locales | Object | { en: {...}, zh: {...}, 'zh-HK': {...}, 'zh-TW': {...} } | 多语言支持的配置信息，可以通过这个参数来指定不同语言的文本内容。默认情况下，支持英文、简体中文、繁体中文和香港中文。如果需要添加其他语言，则可以在这个对象中添加对应的代码和文本内容 |
| template | String | undefined | 自定义模板字符串，可以用来完全定制预览窗口的样式和布局 |
| render | Function | undefined | 自定义渲染函数，可以用来操作 vue2-images-preview 内部的 DOM 元素。这个函数接收一个参数，代表当前的 vue2-images-preview 实例，可以通过这个参数来获取内部元素的引用并进行自定义操作。 |
| onOpened | Function | undefined | 预览窗口打开时的回调函数 |
| onClosed | Function | undefined | 预览窗口关闭时的回调函数 |
事件
vue2-images-preview 组件还支持一些事件监听器，用来监听组件的状态变化并进行相应的处理。下面列举了一些比较常用的事件：
| 事件名称 | 描述 |
|---|---|
| images-loaded | 所有图片加载完成时触发，回调函数接收一个参数 instance，表示当前的 vue2-images-preview 实例 |
| image-loading | 每张图片开始加载时触发，回调函数接收一个参数 instance，表示当前的 vue2-images-preview 实例 |
| image-load-failed | 图片加载失败时触发，回调函数接收两个参数 instance 和 index，分别表示当前的 vue2-images-preview 实例和加载失败的图片在列表中的索引值 |
| open | 预览窗口打开时触发，回调函数接收一个参数 instance，表示当前的 vue2-images-preview 实例 |
| close | 预览窗口关闭时触发，回调函数接收一个参数 instance，表示当前的 vue2-images-preview 实例 |
| change:current-image-index | 当前预览的图片索引号发生变化时触发，回调函数接收两个参数 instance 和 index，分别表示当前的 vue2-images-preview 实例和变化后的图片索引号 |
示例代码
最后，我们提供一段完整的示例代码供大家参考：
-- -------------------- ---- -------
----------
-----
------------------- ------------------
---------------------
---------------- ----- ---- ---- ---- ---- - --
------------------------
---------------------
-----------------------
-------------------------
------------------------
---------------------
----------------------
-------------------
------------------
--------------------
----------------------
--------------------------
----------------------
------------------
--------------------
------------------------------------------------
---- -------------- ------ -- -----------
------------
----------------
----------------
-----------------------------
------
-----------
--------
------ ---------------- ---- ---------------------
------ -------------------------------------
------ ------- -
----------- -
----------------
--
------ -
------ -
----------- -
- ---- --------------------------- ---- ------ --- --------------- ----- -- ----- -- --
- ---- --------------------------- ---- ------ --- --------------- ----- -- ----- -- --
- ---- --------------------------- ---- ------ --- --------------- ----- -- ----- -- -
--
------------- --
--------------- -
---- ------------------------
---- ----------------- ----- --------
---- ----------------
---- ------------------------ ----- --------
---- ------------------ ------- --------
------
------
--
---------------------- -
-- ---
-
-
--
-------- -
------------------- -
----------------- - -----
--
-------------------- -
-- ---
--
--------------------- -
-- ---
--
--------------------------- ------ -
-- ---
-
-
-
---------在这个例子中，我们使用了 v-for 指令来动态渲染多张图片，同时传递了多个配置项和事件监听器。其中，customTemplate 属性指定了一个自定义模板字符串，用来定制预览窗口的布局和样式。customRender 属性指定了一个自定义渲染函数，用来操作组件内部的 DOM 元素。这些属性和方法可以帮助我们更好地控制和定制组件的外观和行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b381e8991b448def66