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部分：

        
        关 闭
        

            

            

                

                    

                    

                    

                
                

                    

                        

                        

                            

                                

                                    

                                
                            
                        
                    
                    

                        

                    
                    

                        

                    
                
            
        

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