博客

详情可见



基于photoswipe的vue图片预览插件

1.安装

npm install vue-photo-preview --save

2.配置

在main.js中

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

3.使用

     <img src="../../assets/images/basis.png" alt=""  preview="1" preview-text='图片展示'>

4.如果是很多张图片切换的话需要preview为相同值

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

5.注意点

补充一点，图片如果是异步获取，那么在获取之后要使用this.$previewRefresh()来重置一下，不然不生效。