vue-photo-preview插件( 照片预览功能 )

Vue Photo Preview 它是基于photoswipe的vue图片预览插件，是一个用于在 Vue.js 项目中实现图片预览功能的插件。它提供了一个简单而强大的方式来展示和浏览图片，并且易于集成到 Vue.js 应用中。

主要特点和功能：

• 支持多种图片格式：Vue Photo Preview 支持预览 JPEG、PNG、GIF 等常见图片格式。
• 缩放和拖拽功能：用户可以通过手势缩放和拖拽操作来放大、缩小、移动图片，以获得更好的预览体验。
• 自定义选项：插件提供了丰富的选项用于自定义预览的行为和外观，例如启用/禁用全屏模式、显示/隐藏工具栏、设置过渡效果等。
• 缩略图支持：你可以为每个预览图片设置缩略图，当用户点击缩略图时，会打开对应的原始图片进行预览。
• 事件回调：Vue Photo Preview 提供了多个事件回调函数，允许你在不同的预览状态下执行自定义的逻辑，例如预览打开、预览关闭等。
• 响应式设计：插件具有响应式设计，适应不同的屏幕尺寸和设备类型。
• 轻量高效：Vue Photo Preview 插件本身具有轻量级和高效的特点，不会对页面加载速度和性能产生显著影响。

安装

npm install vue-photo-preview --save

引入项目

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
 
let options = {
  fullscreenEl: false  //是否可以全屏预览
};
Vue.use(preview, options)
 
如果不写options 和 Vue.use(preview,options)，那么默认具有全屏预览的功能
 
Vue.use(preview)

使用

//可以根据preview分组，不同组的照片对应的preview值不同
//在img标签添加preview属性 preview值相同即表示为同一组
<img src="xx.jpg" preview="0" preview-text="文字">

注意
在获取异步数据的时候可能遇到的问题

解决方法：
如果数据是异步获取回来的，会出现不管你怎么点击，都不会出现效果。这就需要在你成功获取数据回来之后，加上 this.$previewRefresh() ，刷新重置一下