美文网首页
vue-photo-preview常用配置项

vue-photo-preview常用配置项

作者: 掉毛蛙 | 来源:发表于2019-08-09 14:18 被阅读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()来重置一下,不然不生效。

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

    相关文章

      网友评论

          本文标题:vue-photo-preview常用配置项

          本文链接:https://www.haomeiwen.com/subject/cnbcjctx.html