仿照微信的图片查看性能
最近须要用vue重构公司以前的一套程序，其中有一个性能点击图片放大，并且要反对两指缩放，以前是间接原生js+photoswipe 实现的，性能没啥问题，然而吧就是懒得本人写了，筹备百度上找一个间接用，搜了一下还真有几个。然而这代码写的也太长了，二百多行起步，。
也不是多简单的性能搞这么多代码，难以承受！还是决定本人搞吧。
开始又是老一套了，装置插件
npm i photoswipe
引入：
import PhotoSwipe from "photoswipe";import PhotoSwipeUI_Default from "photoswipe/dist/photoswipe-ui-default";import "photoswipe/dist/photoswipe.css";import "photoswipe/dist/default-skin/default-skin.css";重头戏：性能实现（这一共才20来行）
openPhotoSwipe() { let pswpElement = document.querySelectorAll('.pswp')[0] this.gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, this.items, this.PhotoSwipeOption ); this.closePhotoSwipe=true this.gallery.init(); this.gallery.listen("destroy", () => { this.closePhotoSwipe=false this.cPhotoSwipe() }); }, cPhotoSwipe(){ this.gallery.close() }, getAttr(e){ <!--这里用的原生形式，集体习惯，轻易改--> this.items[0].w=e.target.getAttribute('data-w') this.items[0].h=e.target.getAttribute('data-h') this.items[0].src=e.target.getAttribute('src') this.openPhotoSwipe() }HTML局部：
<!-- 这里我只写了一个，多个的本人做个循环--><img src="https://1yue-resource.oss-cn-beijing.aliyuncs.com/H5/BOEmedia/c1/image1.jpg" alt="大图" data-w="3212" data-h="1235" class="pImg" @click="getAttr($event)"> <!-- 图片放大观看 --> <button id="photoSwiper" v-if="closePhotoSwipe" @click="cPhotoSwipe">关 闭</button> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap" > <div class="pswp__share-tooltip"></div> </div> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div>这代码起码要比网上绝大部分少50%以上，看起来情绪都好多了。感觉有用的点个赞-->