Vue-preview 安装指南：5 分钟给 Vue 项目接上 PhotoSwipe 图片预览

Vue-preview 安装指南5 分钟给 Vue 项目接上 PhotoSwipe 图片预览【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview商品列表的缩略图被点开后跳到新标签页体验总差点意思。正规做法是全屏图片预览左右滑动换图双指捏合缩放。Vue-preview 把 PhotoSwipe 封装成了 Vue 插件从安装到跑通全程就四段代码。环境与依赖速览本地只需要一个 Node.js 环境其余依赖插件会替你拉进来。依赖版本作用Node.js建议 ≤ 16跑构建链路偏旧npm随 Node.js 附带安装依赖Vue2.x宿主框架photoswipe^4.1.2移动端手势查看器随插件自动安装 集成实操把预览接进 Vue 项目把仓库拉到本地先把代码弄到磁盘上。git clone https://gitcode.com/gh_mirrors/vu/vue-preview cd vue-preview一键装依赖npm install会顺带把 photoswipe 拉进来不用单独操心。要是接到已有项目里改成在那个项目下执行npm install vue-preview就行。npm install让插件在 main.js 里安家Vue.use一行全局注册之后任何组件都能直接用这个标签。import Vue from vue import VuePreview from vue-preview Vue.use(VuePreview)给缩略图挂上预览插件唯一要吃的输入就是slides数组。缩略图网格和全屏遮罩都由组件自己渲染页面里不用再手写结构。template vue-preview :slidesslides / /template script export default { data: () ({ slides: [{ src: a.jpg, msrc: a-m.jpg, w: 1200, h: 900, title: 商品A }] }) } /script本地跑起来自己项目里按平时的 dev server 命令启动即可。想直接体验官方演示先npm run build打包出dist/vue-preview.min.js再用浏览器打开index.html。 slides 字段速查slides数组里每个对象对应一张图字段不多记不住就先抄这张表。字段含义必填src原图大图地址是msrc缩略图地址网格展示用它是w原图宽度像素是h原图高度像素是alt图片替代文本否title查看器底部显示的说明文字否w和h驱动从缩略图放大的过渡动画填真实值才不闪。组件模板与遮罩结构都在src/preview.vue里官方 README 还附了完整参数说明。✅ 验证滑一下就知道成没成点击任意缩略图能弹出全屏查看器左右滑动换图、双指捏合缩放都正常集成就算落地了。接下来两个方向可以顺手做掉交互上给移动端单独调滑动判定和缩放上下限样式上遮罩根节点是.pswp直接覆写它的 CSS 就能换成自己的视觉。【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考