vue-see 是一款前端常见的图片浏览插件，基于 Vue.js 和 Photoswipe 实现，可以实现图片的全屏幻灯片浏览效果，支持跟随手指滑动，即时缩放图片等功能。本文将详细介绍如何使用 vue-see 插件。
安装
使用 npm 安装 vue-see 步骤如下：
npm install vue-see --save
安装完成后，在所在项目根目录的 package.json 文件中，会看到vue-see 的依赖信息:
{
...
"dependencies": {
"vue-see": "^1.0.0"
}
...
}引入
需要在项目中引入 Photoswipe 的 CSS 样式文件和 JavaScript 脚本。可以通过以下方式引入 CSS 和 JS：
import 'photoswipe/dist/photoswipe.css' import 'photoswipe/dist/default-skin/default-skin.css' import Photoswipe from 'photoswipe' import PhotoswipeUI_Default from 'photoswipe/dist/photoswipe-ui-default' import VueSee from 'vue-see'
配置
完成插件的引入后，需要在 Vue 实例的 created 钩子中，初始化 vue-see 插件。
created() {
this.vueSee = VueSee.getInstance();
},其中 getInstance() 是 vue-see 插件提供的初始化方法，该方法会根据配置项创建新的 vue-see 实例。如果需要配置 vue-see，可以传递一个配置对象给 getInstance() 方法。
以下是 vue-see 的配置项：
-- -------------------- ---- -------
-
------- -------
--------------- ---
---------- -----
------- -----
-------------- -----
-------------------- -----
---------- -----
-------- --- ---
------------------ ----
-------- -----
---------- ----
-------------- --
----- -----
----------- ----------
--------- ---------------------
------ -- -- ---
----------------- -- -- ---
------- -- -- ---
-------- -- -- ---
------------- -- -- ---
------------ -- -- ---
------------------ -- -- ---
------- -- -- ---
------------ -- -- ---
----------- -- -- ---
---------- -- -- ---
------ -- -- ---
-------- -----
------------- ---
--------- -----
-------------------- -- -- ---
------------------- -- -- ---
---------------- -- -- ---
------ --
------ ---
-------- --
-其中：
target：Photoswipe 操作的 DOM 节点，默认为'body'；uiModule：Photoswipe UI 模块；scale：缩放回调函数；getThumbBoundsFn：获取缩略图位置的回调函数；onOpen：打开事件回调函数；onClose：关闭事件回调函数；beforeChange：之前改变事件回调函数；afterChange：改变后事件回调函数；imageLoadComplete：图片加载完成事件回调函数；resize：改变大小事件回调函数；slideChange：滑动改变事件回调函数；beforeZoom：缩放之前事件回调函数；afterZoom：缩放之后事件回调函数；click：点击事件回调函数；shareEl：分享模块DOM节点；shareButtons：分享按钮；fitItems：是否适配所有项；getImageURLForShare：分享图片URL；getPageURLForShare：分享页面URL；getTextForShare：分享文本内容；index：当前图片的索引；items：存放图片数据对象的数组；options：其他 Photoswipe 插件选项
使用
使用 vue-see 插件需要两步：
- 先在 HTML 模板文件中渲染图片（这里使用 v-for 指令渲染），如下所示：
-- -------------------- ---- -------
----------
-----
----
------------- ------ -- ------
------------
---------------
--------------------
--
------
------------ 使用
show()方法打开图片。例如，当用户单击某个图片时，页面将调用show()方法打开图片。
show(index) {
this.vueSee.open(this.items, index);
}示例代码
最后，完整的代码如下所示：
-- -------------------- ---- -------
----------
-----
----
------------- ------ -- ------
------------
---------------
--------------------
--
------
-----------
--------
------ --------------------------------
------ -----------------------------------------------
------ ---------- ---- ------------
------ -------------------- ---- ---------------------------------------
------ ------ ---- ---------
------ ------- -
------ -
------ -
------ -
-
---- ----------------------------------
-- ----
-- ---
--
-
---- ----------------------------------
-- ----
-- ---
-
--
------- ----
-
--
--------- -
----------- - ---------------------
--
-------- -
----------- -
---------------------------- -------
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642681e8991b448e1543