- 引入插件
npm install vue-photo-preview --save
npm install babel-polyfill // 兼容浏览器
2.main.js
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
import '@/styles/index.scss' // global css
import 'babel-polyfill' // 兼容浏览器
Vue.use(preview)
3.style.index.scss
/* 图片预览 */
.pswp{
z-index: 3000 !important;
}
4.vue中使用
//在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="描述文字">
5.加载数据后刷新(异步获取数时用)
this.$nextTick(()=>{
this.$previewRefresh()
})
6.自定义配置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,option)
- 大图使用图片
<img src="xxx.jpg" preview="0" preview-text="描述文字" large="xxx.jpg">
8.事件响应
this.$preview.on('close',())=>{//close只是众多事件名的其中一个,更多请查看文档
console.log('图片查看器被关闭')
})
// 添加图片查看器实例--this.$preview.self 注意:此实例仅在图片查看器被打开时生效
this.$preview.on('imageLoadComplete',(e,item)=>{
console.log(this.$preview.self) //此时this.$preview.self拥有原插件photoswipe文档中的所有方法和属性
})