vue点击图片查看大图使用插件 vue-photo-preview

1、引入插件

npm install vue-photo-preview --save

2、main.js

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

3、vue中使用

# 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="描述文字">

4、加载数据后刷新

this.$previewRefresh()

5、自定义配置main.js（去掉其他按钮等） 

let options = {
  fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: false, //控制是否显示右上角关闭按钮
  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'
  import Vue from 'vue'
  Vue.use(preview,options)

 

6、大图使用其他图片

<img src="xxx.jpg" preview="0" preview-text="描述文字" large="xxx.jpg">