基于 PhotoSwipe 的 Vue 图片预览插件

Question

之前一直使用的是微信提供的预览图片接口，但是在浏览器里面调试的时候是无法查看，只有在微信里面才能够看到效果，不过使用这款 vue-photo-preview 插件的话能兼容所有的浏览器。

插件说明

vue-photo-preview 基于 PhotoSwipe 并做了以下的改进：

1. 简化了 PhotoSwipe 的默认设置
2. 取消了图片需设定尺寸的要求
3. 默认关闭了分享按钮
4. 简化了 HTML 结构

使用方法

# 安装
npm install vue-photo-preview --save

# 引入
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
//或者
//var option={....}
//option配置请查看
//http://photoswipe.com/documentation/options.html
//Vue.use(preview,option)

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

如果图片是异步生成的，在图片数据更新后调用：

this.$previewRefresh()

相关连接

• Npm 地址：https://www.npmjs.com/package/vue-photo-preview
• 淘宝源地址：http://npm.taobao.org/package/vue-photo-preview
• Github 地址：https://github.com/826327700/vue-photo-preview