vue-photo-preview
应用场景
点击图片,能够以类似朋友圈的方式展示图片,主要功能:预览,放大。
选择
经过网上一番查阅,有三款插件比较不错,分别是 viewerjs、vue-photo-preview 以及 vue-picture-preview。经过简单比较,viewerjs 功能比较强大,更适合web端。vue-picture-preview 只有预览和切换上下张功能,无法满足全部需求。故优先选择vue-photo-preview。
使用
1、安装
npm install vue-photo-preview --save
2、注册和配置
import preview from ‘vue-photo-preview’
import ‘vue-photo-preview/dist/skin.css’
let options = {
fullscreenEl: false,
}
Vue.use(preview, options)
Vue.use(preview)
3、使用
注意
1、上面为简单使用,option其实还有更多可配置项,例如:
let options = {
fullscreenEl: false, //控制是否显示右上角全屏按钮
closeEl: false, //控制是否显示右上角关闭按钮
tapToClose: true, //点击滑动区域应关闭图库
shareEl: false, //控制是否显示分享按钮
zoomEl: false, //控制是否显示放大缩小按钮
counterEl: false, //控制是否显示左上角图片数量按钮
tapToToggleControls: true, //点击应切换控件的可见性
clickToCloseNonZoomable: true, //点击图片应关闭图库,仅当图像小于视口的大小时
indexIndicatorSep: ’ / '//图片数量的分隔符
}
更多option配置项,见:https://photoswipe.com/documentation/options.html
2、若img标签使用的是异步图片数据,需要在加载数据之后,加一句:
this.$previewRefresh();
这样刷新之后,vue-photo-preview预览效果才起效
————————————————
原文链接:https://blog.csdn.net/yaojie5519/article/details/103638275