当前位置：首页 > news >正文

25-vue-photo-preview的使用及使用过程中的问题解决方案

news 2025/8/1 8:19:41

前提条件：在整理预览工具的过程中遇到vue-photo-preview这个插件库，是用于预览图片的，好像没有用过，所以就花了点时间玩了一下

这里简单记录一下使用方法以及在过程中遇到的一些问题

1. 安装（安装后的版本是1.1.3）

npm install vue-photo-preview --save

2. 使用

全局注册插件

import PhotoPreview from 'vue-photo-preview';
import 'vue-photo-preview/dist/skin.css';Vue.use(PhotoPreview, {fullscreenEl: false, // 关闭全屏按钮zoomEl: false,       // 关闭缩放按钮bgOpacity: 0.85,    // 背景透明度
});

更多option配置项，见：Options | PhotoSwipe

在组件中使用

<template><div><!-- 同组图片使用相同值preview，想要不同组展示的可以通过区分preview的值实现 --><imgv-for="(item, index) in images":key="index":src="item.src":large="item.large"preview="0"preview-text="图片描述"style="width: 100px; cursor: pointer;"/></div>
</template>

<script>
export default {data() {return {images: [{ src: '/thumb1.jpg', large: '/large1.jpg' },{ src: '/thumb2.jpg', large: '/large2.jpg' },],};},
};
</script>

3. 遇到的问题

①代码提示没有找到vue-photo-preview的声明文件

正常插件安装之后会有一个types目录，下面有.d.ts的声明文件，但是vue-photo-preview这个包没有，所以提示了这个错误（但是不影响插件的使用）

且根据提示使用npm i --save-dev @types/vue-photo-preview报错，那就换另一种方法，添加一个包含 declare module 'vue-photo-preview'; 的新声明(.d.ts)文件

在src目录下创建（文件名自定义）

declare module "vue-photo-preview" {import { Plugin } from "vue";const install: Plugin;export default install;
}

②使用v-if后点击无效

<div v-if="previewType === 'vue-photo-preview'"><imgv-for="(item, index) in imgList":key="'vue-photo-preview' + index":src="item.src":large="item.src"preview="0"preview-text="图片描述"style="width: 100px; cursor: pointer"/>
</div>

检查发现，有效的img在F12中的元素是这样的

而无效的img是这样的

缺少了data-pswp-uid的标识属性

data-pswp-uid 的作用

唯一标识：data-pswp-uid 是 PhotoSwipe 自动为可预览图片生成的唯一标识，用于在预览时定位对应的图片。
内部机制：当点击图片时，vue-photo-preview 会通过这个属性找到图片在预览组中的位置（如缩略图和大图的对应关系）。

是因为使用了v-if后，图片可能在插件初始化后才渲染到 DOM，所以图片没有和预览进行绑定，可以使用以下方式解决

方法一：强制重新扫描图片

//$previewRefresh()在注册插件时会自动挂载到Vue上
this.$nextTick(() => {this.$previewRefresh();//强制重新扫描图片//网上说可以用//this.$preview.refresh()//或者//this.$preview.open()//没有的事，$preview虽然有挂载，但是没有这两个方法（很坑），如果不知道有没有这个方法的，可以直接打印this.$preview，或者在包文件里面找
});

这是打印this.$preview的