图片预览插件vue-photo-preview的使用示例详解

npm i vue-photo-preview --save

cnpm i vue-photo-preview --save

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)

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

<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">