淘宝客自建手机网站蚌埠网络科技有限公司

移动端项目中需要图片预览的功能，但本身使用mintui，vantui中虽然也有，但是为了一个组件安装这个有点儿多余，就选用了vue-photo-preview插件实现（其实偷懒也不想自己写）。
1、安装

npm i vue-photo-preview --save

或者用淘宝镜像

cnpm i vue-photo-preview --save

2、引入
打开项目中main.js，添加如下代码

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

注：引入可进行配置，部分常用配置项：

maxSpreadZoom: 1, // 预览图最大的倍数，默认2倍
fullscreenEl: false, //是否显示右上角全屏按钮
closeEl: true, //是否显示右上角关闭按钮
tapToClose: true, //点击滑动区域应关闭图库
shareEl: false, //是否显示分享按钮
zoomEl: false, //是否显示放大缩小按钮
counterEl: false, //是否显示左上角图片数量按钮
arrowEl: true,  //是否显示左右箭头（pc浏览器模拟手机时）
tapToToggleControls: true, //点击应切换控件的可见性
clickToCloseNonZoomable: true //点击图片应关闭图库，仅当图像小于视口的大小时

具体配置完整引入如下所示：

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let options = {maxSpreadZoom: 1, // 预览图最大的倍数，默认2倍fullscreenEl: false, //是否显示右上角全屏按钮closeEl: true, //是否显示右上角关闭按钮tapToClose: true, //点击滑动区域应关闭图库shareEl: false, //是否显示分享按钮zoomEl: false, //是否显示放大缩小按钮counterEl: false, //是否显示左上角图片数量按钮arrowEl: true,  //是否显示左右箭头（pc浏览器模拟手机时）tapToToggleControls: true, //点击应切换控件的可见性clickToCloseNonZoomable: true //点击图片应关闭图库，仅当图像小于视口的大小时
}
Vue.use(preview, options)
Vue.use(preview)

3、使用
直接使用：

<img v-show="picUrl!=''" class="pic-icon" :src="picUrl" preview preview-text="风景">

注：preview-text为图片的描述

如图：

图片多的话，可以根据preview分组进行使用。

<img src="地址" preview="1" preview-text="分组1——1">
<img src="地址" preview="1" preview-text="分组1——2">
<img src="地址" preview="2" preview-text="分组2——1">
<img src="地址" preview="3" preview-text="分组3——1">

如图片数据请求完，调用this.$previewRefresh()。