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

简介

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

以下是 Vue Photo Preview 的一些主要特点和功能：

1. 支持多种图片格式：Vue Photo Preview 支持预览 JPEG、PNG、GIF 等常见图片格式。

2. 缩放和拖拽功能：用户可以通过手势缩放和拖拽操作来放大、缩小、移动图片，以获得更好的预览体验。

3. 自定义选项：插件提供了丰富的选项用于自定义预览的行为和外观，例如启用/禁用全屏模式、显示/隐藏工具栏、设置过渡效果等。

4. 缩略图支持：你可以为每个预览图片设置缩略图，当用户点击缩略图时，会打开对应的原始图片进行预览。

5. 事件回调：Vue Photo Preview 提供了多个事件回调函数，允许你在不同的预览状态下执行自定义的逻辑，例如预览打开、预览关闭等。

6. 响应式设计：插件具有响应式设计，适应不同的屏幕尺寸和设备类型，提供一致的用户体验。

7. 轻量高效：Vue Photo Preview 插件本身具有轻量级和高效的特点，不会对页面加载速度和性能产生显著影响。

总而言之，Vue Photo Preview 是一个方便易用的 Vue.js 图片预览插件，可以帮助你在 Vue.js 项目中实现优雅的图片预览功能，提供良好的用户体验和交互效果。它适用于各种类型的图库、图片展示和相册网站等应用场景。

安装

npm install vue-photo-preview --save

导入main.js

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let options = {
  fullscreenEl: false
};
Vue.use(preview, options)
Vue.use(preview)

使用

//在img标签添加preview属性 preview值相同即表示为同一组
<img src="xxx.jpg" preview="0" preview-text="描述文字">

重点注意 (待测试)

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

解决方法（待测试）：

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