vue-photoswipe 是一个基于 Vue.js 的 lightbox 图片查看插件，它可以帮助你快速集成展示相册等需求，实现图片的预览功能。本文将向大家介绍如何使用这个 npm 包，并提供针对不同场景的写法示例。
安装
要使用 vue-photoswipe，首先需要安装它，可以使用 npm 安装：
npm install vue-photoswipe --save
如果你是使用 yarn，则可以运行以下命令：
yarn add vue-photoswipe
使用
安装完 vue-photoswipe 后，我们需要先在项目中导入它。在入口文件（main.js）中，加入以下代码：
import Vue from 'vue' import VuePhotoSwipe from 'vue-photoswipe' import 'photoswipe/dist/photoswipe.css' import 'photoswipe/dist/default-skin/default-skin.css' Vue.use(VuePhotoSwipe)
如果你的项目使用的是 Vue 2.x 版本，你还需要在 .vue 文件中引入 Photoswipe 的样式文件：
<style> @import "~photoswipe/dist/photoswipe.css"; @import "~photoswipe/dist/default-skin/default-skin.css"; </style>
现在，我们就可以在项目中使用 vue-photoswipe 了。
基础用法
首先，我们来看一下 vue-photoswipe 的基础用法。
<vue-photo-swipe :items="items"/>
items 是一个数组，用来存储要展示的图片信息。每个图片都需要包含以下属性：
- src：图片地址
- w：图片宽度
- h：图片高度
假设有三张图片，可以这样定义 items 数组：
-- -------------------- ---- -------
----- ----- - -
-
---- ----------------------------------------
-- ----
-- ---
--
-
---- ----------------------------------------
-- ----
-- ---
--
-
---- ----------------------------------------
-- ----
-- ---
-
-自定义图片尺寸
如果图片的宽度和高度不一致，可以使用如下方式定义 items 数组：
-- -------------------- ---- -------
----- ----- - -
-
---- ----------------------------------------
-- ----
-- ---
--
-
---- ----------------------------------------
-- ----
-- ---
--
-
---- ----------------------------------------
-- ----
-- ---
-
-传递 options
我们可以通过传递 options 配置项，进一步定制 vue-photoswipe 的行为。
例如：
<vue-photo-swipe :items="items" :options="{ index: 1 }" />在这里，我们将展示图片列表中的第二张图片。
事件监听
vue-photoswipe 还支持事件监听，你可以通过监听事件来进行一些操作。
例如，我们可以监听图片切换事件（beforeChange 和 afterChange）：
-- -------------------- ---- -------
---------------- -------------- ------------------------------ ---------------------------- --
---
-------- -
--------------------- -
--------------------------- ------
--
-------------------- -
-------------------------- ------
-
-这样可以让我们在图片切换的时候，执行一些操作。
更多配置
vue-photoswipe 还支持更多的配置选项，你可以在官方文档中查看详情：docs。
示例代码
下面是一个完整的 vue-photoswipe 示例代码：
-- -------------------- ---- -------
----------
---- ----------------
------- ---------- ---------
---- ----------------
----
--------------------
-------------- ------ -- -------
------------
-------------------------------
---- ---------------- ------------------ --
------
------
----------------
-----------------
--------------
------------------
------------------------------
----------------------------
--
------
-----------
--------
------ ------------- ---- ----------------
------ --------------------------------
------ -----------------------------------------------
------ ------- -
----- ------
----------- -
-------------
--
------ -
------ -
------------ ---------------
------- -
-
---- ----------------------------------------
------ ------ --
--
-
---- ----------------------------------------
------ ------ --
--
-
---- ----------------------------------------
------ ------ --
-
--
-------- -
------ --
-------------- ------
-------------------- ------
-------- -----
-
-
--
--------- -
------- -
------ --------------------- -- --
---- ----------
------ ------------
-- ----
-- ---
---
-
--
-------- -
--------------------- -
------------------ - -----
-----------------------------------------------
--
--------------------- -
------------------- -------- ------
--
-------------------- -
------------------ -------- ------
-
-
-
---------
-------
-------- -
---------- -------
------- - -----
-
-- -
----------- -------
---------- -----
-------------- -----
-
-------- -
-------- -----
---------------- -------
---------- -----
-
------------- -
------- -----
------- --------
-
--- -
---------- -----
-
--------总结
vue-photoswipe 是一个非常好用的轻量级图片查看插件，它不需要依赖 jQuery 等第三方库，并且支持交互体验良好的手势操作，对于展示相册等需求非常适用。本文通过示例代码详细介绍了 vue-photoswipe 的使用方法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd481e8991b448e66a4