关于vue.js:vue-photoswipe-实现点击图片两指缩放

仿照微信的图片查看性能

最近须要用 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% 以上，看起来情绪都好多了。感觉有用的点个赞 –>