在前端开发中，图像展示是一个非常重要的功能。vue-viewer 便是一个用于 Vue.js 的图片查看组件库，它可帮助你更加方便地在 web 应用中展示图片。
在本文中，我们将带您通过 vue-viewer 的使用教程，期望您能够在自己的项目中加以运用。
安装
vue-viewer 的安装相当简单。您可以通过以下方式安装依赖：
npm install vue-viewer --save
在安装完成后，您便可以在需要的组件中引入 vue-viewer 了。
引入
您可以在 Vue.js 中使用 vue-viewer 组件，仅将其导入并挂载到您的应用中即可。HTML 文件中的代码如下所示：
-- -------------------- ---- -------
----------
-----
------- --------------------------
------
-----------
--------
------ --------------------------
------ ------ ---- ----------
------ --- ---- -----
---------------
------ ------- -
----- -------------------
------ -
------ -
------- -----------------------------------------
-
-
-
---------在此样例中，我们使用了 Vue.js，且在样例组件中添加了 vue-viewer。
我们还在样例的 CSS 中添加了 viewer.js 的 CSS 文件，有兴趣的读者可以去多了解一下。
属性
一旦您将 vue-viewer 安装并成功引入了它，您可以在 HTML 文件内编写一个 <viewer>: 组件标签。vue-viewer 带有以下几个可配置属性：
- images：类型为全路径字符串的数组，代表您需要在应用中展示的图片。默认值: []
- default-index：用于展示指向images数组某个默认图片。默认值为0
- options：viewer.js 的可选属性，可提供例如放大和缩小以及旋转图像等功能。默认值：{}
监听事件
vue-viewer 组件允许您监听以下监听事件：
- hidden：当用户浏览组件关闭时触发此监听事件。
- shown：当用户浏览组件被打开时触发此监听事件。
- viewed：当用户查看图片时触发此监听事件。
监听事件的具体代码如下所示：
-- -------------------- ---- -------
----------
-----
-------
----------------
------------------------
----------------------
------------------------
----------
------
-----------
--------
------ ------- -
----- -------------------
------ -
------ -
------- -----------------------------------------
-
--
-------- -
---------------- -
---------------------
--
--------------- -
---------------------
--
---------------- -
---------------------
-
-
-
---------示例代码
下面我们给出一个完整的 vue-viewer 示例代码供大家参考使用。
-- -------------------- ---- -------
----------
-----
------ ------ ---------
---- ------------
---- ---------------
---- -------------
---- ------------------
---- ------------
---- ------------ -------- ------
---- ----------------------- ------------------------
------- ---------------- ----------------------------
------
------
---- ------------ -------- ------
---- ----------------------- ------------------------
------- ---------------- ----------------------------
------
------
---- ------------ -------- ------
---- ----------------------- ------------------------
------- ---------------- ----------------------------
------
------
------
------
------
------
------
------
-----------
--------
------ ---------------------------
------ ------ ---- ----------
------ ------- -
----- ---------------
---- -- -
------ -
--------
------------------------------------------------------------------
-----------------------------------------------------
-----------------------------------------------------
-----------------------------------------------------
-----------------------------------------------------
-----------------------------------------------------
-----------------------------------------------------
-
-
--
----------- -
------
--
-
---------这份代码将完全清晰地将一个简单的使用了 vue-viewer 的图片查看器加入到您的应用中。
vue-viewer 是一个重要的图片查看组件库，能够有效地增加您的 images 视觉效果以及更好地向您的端口展示图片资源。是一个非常值得在您的 web 应用中运用的 npm 库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005558681e8991b448d2ae9