vue-photo-preview查看大图显示

1、下载依赖

npm install vue-photo-preview --save

2、min.js引入

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

let options = {
  fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: false, //控制是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //控制是否显示分享按钮
  zoomEl: false, //控制是否显示放大缩小按钮
  counterEl: false, //控制是否显示左上角图片数量按钮
  arrowEl: true,  //控制如图的左右箭头（pc浏览器模拟手机时）
  tapToToggleControls: true, //点击应切换控件的可见性
  clickToCloseNonZoomable: true, //点击图片应关闭图库，仅当图像小于视口的大小时
  showHideOpacity: true, //是否开启动画
  bgOpacity: 0.5 //遮罩层透明度
};
 
Vue.use(preview,options) //第二个参数可不选

options配置请点击https://photoswipe.com/documentation/options.html查看

3、vue中使用

<img src="xxx.jpg" preview="0" large="xx.jpg">
<!-- 
src:小图展示图片
large:大图展示图片（如不写则大图展示src）
preview:分组
-->

4、加载数据后刷新

this.$previewRefresh()