vue-photo-preview是一个移动端多图预览插件,网上很多它的使用方法,这里简单记录下它的一些常用配置
默认大图点开后如下

(上面图片是浏览器模拟手机打开的页面,当检测到有鼠标时才会显示左右箭头,手机上不会出现这个箭头)
例如,有个默认配置让我觉得用起来不是很方便,关闭预览大图的时候要点击右上角关闭按钮或者垂直下拉才能关闭,设置tapToClose这个属性为true可实现点击大图关闭预览。
let options = {
fullscreenEl: false, //控制是否显示右上角全屏按钮
closeEl: false, //控制是否显示右上角关闭按钮
tapToClose: true, //点击滑动区域应关闭图库
shareEl: false, //控制是否显示分享按钮
zoomEl: false, //控制是否显示放大缩小按钮
counterEl: false, //控制是否显示左上角图片数量按钮
arrowEl: true, //控制如图的左右箭头(pc浏览器模拟手机时)
tapToToggleControls: true, //点击应切换控件的可见性
clickToCloseNonZoomable: true //点击图片应关闭图库,仅当图像小于视口的大小时
};
补充一点,图片如果是异步获取,那么在获取之后要使用this.$previewRefresh()来重置一下,不然不生效。
不是很全,陆续补充,有错误地方请指正。
网友评论