Vue-preview 图片预览：新手安装与上手完整指南

Vue-preview 图片预览：新手安装与上手完整指南

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

Vue-preview 是一个基于 Vue.js 的图片预览插件，封装了 PhotoSwipe 图片查看器，让缩略图列表快速拥有滑动换图、手势缩放等效果，适合需要做移动端图片画廊展示的人。这篇 Vue-preview 安装指南带你几分钟内跑起来。

它到底能干什么

插件把 Vue.js 组件和 PhotoSwipe（一个支持触摸手势的图片查看器 JS 库）封装到一起：你在页面上放一排缩略图，点击任意一张就弹出全屏预览。

特性要点：

• 滑动换图：手机上左右滑动即可切换上一张 / 下一张
• 手势缩放：双指开合放大缩小，体验接近系统相册
• 位置指示：预览时显示当前是第几张图
• 点击关闭：点一下空白处即可退出预览

开始前确认这两样

• Node.js：运行 JavaScript 的环境，建议装 LTS 版本，执行node -v可确认已安装
• npm 或 yarn：依赖管理器，随 Node.js 自带（yarn 需另装），用来安装 Vue 和插件依赖

最快上手：4 步跑通

第 1 步：克隆仓库

执行：

git clone https://gitcode.com/gh_mirrors/vu/vue-preview

把 Vue-preview 源码下载到本地。

第 2 步：进入项目目录

cd vue-preview

切换到项目根目录，后面的命令都在这里执行。

第 3 步：安装依赖

npm install

习惯用 yarn 的话执行yarn install，作用相同：装好 Vue 2.5、PhotoSwipe 等全部依赖。

第 4 步：引入插件

打开src/main.js，加两行：

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

这会把vue-preview组件全局注册，之后任何组件都能直接用。

在组件里用起来

在模板里放一个<vue-preview>，把缩略图数据通过slides传进去：

<template> <div class="my-gallery"> <vue-preview :slides="thumbs"></vue-preview> </div> </template> <script> export default { data () { return { thumbs: [ { src: 'big/1.jpg', msrc: 'thumb/1.jpg', alt: '图1', w: 1200, h: 800 }, { src: 'big/2.jpg', msrc: 'thumb/2.jpg', alt: '图2', w: 1600, h: 900 } ] } } } </script>

如何配置 slides 数据

slides是一个数组，每一项对应一张图，各字段含义如下：

常见坑，提前避开

• 缺 msrc 导致预览异常：打开预览时画面空白或缩略图定位错乱。给每张图片都配一张低分辨率小图，宽高比与 src 保持一致即可。
• w / h 填错，缩放会跳：宽高和真实尺寸不符时，放大缩小动画会瞬间跳变。用图片工具量出真实像素再填。
• 图片跨域加载失败：图片挂在别的域名下可能被浏览器拦截。把图片放到同域，或给图片服务器加上 CORS 响应头。

总结

按上面 4 步装好依赖、注册插件，Vue-preview 图片预览就能在你的项目里跑起来了；更多配置项可以查看项目里的 README.md。

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