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>

配置项

            PhotoSwipeOption: {
                fullscreenEl: true,
                shareEl: false,
                arrowEl: true,
                preloaderEl: true,
                loop: false,
                bgOpacity: 0.85,
                showHideOpacity: true,
                errorMsg: "图片加载失败",
                history: false,
                focus: false,
                showAnimationDuration: 0,
                hideAnimationDuration: 0,
            },

这代码最少要比网上绝大部分少50%以上，看起来心情都好多了。感觉有用的点个赞-->