vue-photo-preview常用配置项

2019-08-09  本文已影响0人  掉毛蛙

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

默认大图点开后如下


4913.png

(上面图片是浏览器模拟手机打开的页面,当检测到有鼠标时才会显示左右箭头,手机上不会出现这个箭头)

例如,有个默认配置让我觉得用起来不是很方便,关闭预览大图的时候要点击右上角关闭按钮或者垂直下拉才能关闭,设置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()来重置一下,不然不生效。

不是很全,陆续补充,有错误地方请指正。

上一篇下一篇

猜你喜欢

热点阅读