企业官网建设流程全解析

三步给 Vue 项目加上图片预览：vue-preview 快速上手教程

【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview

vue-preview 是一个 Vue 图片预览插件，把 PhotoSwipe 封装成了<vue-preview>组件，一行标签就能让页面上的缩略图点开进入全屏沉浸模式，支持滑动换图和手势缩放。这篇文章带你把它跑起来。

它是什么、适合谁用

简单说，它解决的是"点缩略图看大图"这件事。商品列表、相册、文章插图这类多图场景最适用，手机端和桌面端都能用。技术上一句话带过：基于 Vue 2 + PhotoSwipe 实现，移动端手势开箱即用。

动手前：环境准备 📦

另外注意：插件要求 Vue 2.5 及以上，Vue 3 项目不适用。

三步跑起来 🚀

1. 装

npm i vue-preview -S

2. 注册

在main.js里全局注册：

import Vue from 'vue' import VuePreview from 'vue-preview' Vue.use(VuePreview)

不想用默认外观，可以在注册时传参数，比如tapToClose: true点空白处关闭、captionEl: false隐藏说明文字，参数细节看 README.md。

3. 用

模板里放一个组件，把图片数据数组传给slides：

<vue-preview :slides="slides"></vue-preview>

data () { return { slides: [ { src: '大图地址', msrc: '缩略图地址', alt: '替换文本', title: '图片说明', w: 600, h: 400 } ] } }

每张图至少要有src（大图）和msrc（缩略图），w、h填真实宽高。

跑完之后 👀

刷新页面，点任意缩略图：全屏黑底弹出大图，手指左右滑换图、双指缩放，顶部显示当前是第几张，再点区域外或按关闭按钮退出。看到这些就说明装好了。

新手容易卡两个地方。一是全屏点不出来，多半是数据里msrc或宽高漏了，组件靠这两个字段定位缩略图。二是版本问题：2.5 以下的 Vue 会不兼容，先确认package.json里的 vue 版本。

接下来可以看看

想进一步定制，可以翻翻组件实现 src/preview.vue，或者监听close事件，在用户关闭预览时顺手做点别的（比如统计浏览行为）。

【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview