1.npm 或者bower等方式引入

npm install photoSwiper

2.view代码

  1.        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" >
  2.             <div class="pswp__bg"></div>
  3.             <div class="pswp__scroll-wrap" >
  4.                 <div class="pswp__container">
  5.                     <div class="pswp__item"></div>
  6.                     <div class="pswp__item"></div>
  7.                     <div class="pswp__item"></div>
  8.                 </div>
  9.                 <div class="pswp__ui pswp__ui--hidden">
  10.                     <div class="pswp__top-bar">
  11.                         <div class="pswp__counter"></div>
  12.                         <!-- <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> -->
  13.                         <!-- <button class="pswp__button pswp__button--share" title="Share"></button> -->
  14.                         <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  15.                         <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  16.                         <div class="pswp__preloader">
  17.                             <div class="pswp__preloader__icn">
  18.                             <div class="pswp__preloader__cut">
  19.                                 <div class="pswp__preloader__donut"></div>
  20.                             </div>
  21.                             </div>
  22.                         </div>
  23.                     </div>
  24.                     <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  25.                         <div class="pswp__share-tooltip"></div>
  26.                     </div>
  27.                     <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  28.                     </button>
  29.                     <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  30.                     </button>
  31.                     <div class="pswp__caption">
  32.                         <div class="pswp__caption__center"></div>
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.         </div>

3.script代码

  1. mounted() {
  2.   let photoSwipeFun =  new PhotoSwipe({
  3.     gallerySelector: '#gallery--simple',
  4.     childSelector: 'img',
  5.   });
  6.   photoSwipeFun.init()
  7. },
  8.   methods: {
  9.     openPhotoSwipe (e){
  10.       this.showMask1 = !this.showMask1;
  11.       var pswpElement = document.querySelectorAll('.pswp')[0];
  12.       let imgSrc = e.srcElement.src
  13.       var items = [
  14.         {
  15.           src: imgSrc,
  16.           w: 702,
  17.           h: 400,
  18.         }
  19.       ];
  20.       var options = {     
  21.         history: false,
  22.         focus: false,
  23.         showAnimationDuration: 0,
  24.         hideAnimationDuration: 0,
  25.         maxSpreadZoom: 3.0, // 最大放大倍数
  26.         closeOnScroll: false,
  27.         closeOnVerticalDrag:false, // 关闭向上滑动关闭图片
  28.         fullscreenEl: false, // 禁止全屏，不显示全屏
  29.         pinchToClose: false, // 禁止缩小关闭图片
  30.         tapToClose: true, // 单击关闭图片
  31.       };
  32.       var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
  33.       gallery.init();
  34.     },
  35.   }