在前端开发中，图片展示是很常见的需求，而 vue-images-viewer 就是一款实现图片浏览、放大、缩小、轮播等功能的 Vue 组件。下面，我们就来介绍如何使用 vue-images-viewer。
安装 vue-images-viewer
通过 npm 安装 vue-images-viewer：
npm install vue-images-viewer --save
使用 vue-images-viewer
引入 vue-images-viewer 组件：
-- -------------------- ---- -------
----------
-----
---- -- ----------------- ------ ---
------------------ ---------------- --
---- -- ----------------- ------ ---
------------------ ---------------- ------------------ --
------
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----- ---------------
----------- -
----------------
--
------ -
------ -
------- -
-
----- ---------
---- -----------------------------------
--
-
----- ---------
---- ------------------------------------
--
--
-------- -
-------- ------
----------- -----
----------- --
--
--
--
--
---------上面的代码演示了如何使用 vue-images-viewer 来显示单张图片和多张图片。其中，:images 属性用来传递图片数组，:options 属性则用来设置组件的一些选项，比如是否显示工具栏、是否显示缩略图、初始展示哪张图片等。
vue-images-viewer 参数说明
vue-images-viewer 组件支持以下参数：
- images：必选，要展示的图片数组，格式如下：
-- -------------------- ---- -------
-
-
----- --------
---- --------
--
-
----- --------
---- --------
--
-- options：可选，组件选项，具体如下：
| 参数名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| toolbar | Boolean | true | 是否显示工具栏 |
| thumbnails | Boolean | true | 是否显示缩略图 |
| startIndex | Number | 0 | 初始展示哪张图片，从 0 开始 |
| infinite | Boolean | false | 是否开启无限循环（到最后一张时，继续向右翻页将回到第一张；向左翻页同理） |
| classPrefix | String | vic | 组件样式的前缀 |
更多示例
下面，我们来增加一些更完整的示例，包括图片轮播、自定义样式、缩略图等。
图片轮播
-- -------------------- ---- -------
----------
-----
---- ---- ---
------------------ ---------------- ------------------ ---------------------- --
------
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----- ----------------
----------- -
----------------
--
------ -
------ -
------- -
-
----- ---------
---- -----------------------------------
--
-
----- ---------
---- ------------------------------------
--
-
----- ---------
---- --------------------------------------
--
-
----- ---------
---- ---------------------------------------
--
-
----- ---------
---- ------------------------------------
--
--
-------- -
-------- ------
----------- -----
--------- -----
--
--
--
-------- -
------------------- -
---------------------- -------
--
--
--
---------自定义样式
-- -------------------- ---- -------
----------
---- -------------------------
---- ----- ---
------------------ ---------------- ------------------ --
------
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----- ---------------------
----------- -
----------------
--
------ -
------ -
------- -
-
----- ---------
---- -----------------------------------
--
-
----- ---------
---- ------------------------------------
--
--
-------- -
-------- ------
----------- -----
--
--
--
--
---------
------ -------
----------------- -
------ ------
------- - -----
------------ -
------- --- ----- -----
----------------- --------
-
-------------------- -
----------------- --------
------ -----
-------------- ----
------- -
----------------- --------
-
-------- -
----------------- --------
-
-
-
--------缩略图
-- -------------------- ---- -------
----------
-----
---- ----- ---
------------------ ---------------- ------------------ --
---- ------ ---
------------------ ---------------- ------------------- --
------
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----- ----------------------
----------- -
----------------
--
------ -
------ -
------- -
-
----- ---------
---- -----------------------------------
--
-
----- ---------
---- ------------------------------------
--
-
----- ---------
---- --------------------------------------
--
-
----- ---------
---- ---------------------------------------
--
-
----- ---------
---- ------------------------------------
--
--
-------- -
-------- ------
----------- -----
--
--------- -
-------- ------
----------- ------
--
--
--
--
---------结语
通过本文的介绍，你可以学会如何使用 vue-images-viewer 在 Vue 项目中展示图片，包括基本用法、参数说明以及更多示例。希望能够对你的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb881e8991b448da3e9