之前pc端時候，點擊圖片放大功能封裝了一個插件。思路是這樣的，點擊圖片時候，獲取圖片地址，然后獲取真實圖片的大小，判斷下屏幕大小，如果圖片大小大于屏幕大小，則圖片寬度設為和屏幕寬度一樣。如果小于屏幕寬度，則屏幕寬度減去彈出圖片的寬度，再除以2居中對齊。高度也是類似。大致思想如此。到手機端時候，需求說每個組里的圖片不但能放大，放大后還能左右翻轉。好吧，找個插件吧，于是開始了vue+photoswipe.js找坑之路。

好了，廢話不多說了

首先引入photoswipe.js和photoswipe-ui-default.min.js 和那段html(<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">),這里我是以組件的形式引入的。代碼如下

var enlarge = Vue.extend({template: '<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>'+'<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>'+'<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>'+'<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>'+'<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>'+'<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">'+'</button>'+'<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">'+'</button>'+'<div class="pswp__caption">'+'<div class="pswp__caption__center"></div>'+'</div>'+'</div>'+'</div>'+ '</div>'}) 引進這個js文件，并注冊。

引入initPhotoSwipeFromDOM這個方法

var initPhotoSwipeFromDOM = function (gallerySelector) {// 解析來自DOM元素幻燈片數據（URL，標題，大小...）// (children of gallerySelector)var parseThumbnailElements = function (el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],figureEl,linkEl,size,item,divEl;for (var i = 0; i < numNodes; i++) {figureEl = thumbElements[i]; // <figure> element// 僅包括元素節點if (figureEl.nodeType !== 1) {continue;}divEl = figureEl.children[0];linkEl = divEl.children[0]; // <a> elementsize = linkEl.getAttribute('data-size').split('x');// 創建幻燈片對象item = {src: linkEl.getAttribute('href'),w: parseInt(size[0], 10),h: parseInt(size[1], 10)};if (figureEl.children.length > 1) {// <figcaption> contentitem.title = figureEl.children[1].innerHTML;}if (linkEl.children.length > 0) {// <img> 縮略圖節點, 檢索縮略圖網址item.msrc = linkEl.children[0].getAttribute('src');}item.el = figureEl; // 保存鏈接元素 for getThumbBoundsFnitems.push(item);}return items;};// 查找最近的父節點var closest = function closest(el, fn) {return el && (fn(el) ? el : closest(el.parentNode, fn));};// 當用戶點擊縮略圖觸發var onThumbnailsClick = function (e) {e = e || window.event;e.preventDefault ? e.preventDefault() : e.returnValue = false;var eTarget = e.target || e.srcElement;// find root element of slidevar clickedListItem = closest(eTarget, function (el) {return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');});if (!clickedListItem) {return;}// find index of clicked item by looping through all child nodes// alternatively, you may define index via data- attributevar clickedGallery = clickedListItem.parentNode,childNodes = clickedListItem.parentNode.childNodes,numChildNodes = childNodes.length,nodeIndex = 0,index;for (var i = 0; i < numChildNodes; i++) {if (childNodes[i].nodeType !== 1) {continue;}if (childNodes[i] === clickedListItem) {index = nodeIndex;break;}nodeIndex++;}if (index >= 0) {// open PhotoSwipe if valid index foundopenPhotoSwipe(index, clickedGallery);}return false;};// parse picture index and gallery index from URL (#&pid=1&gid=2)var photoswipeParseHash = function () {var hash = window.location.hash.substring(1),params = {};//console.log("222"+hash);if (hash.length < 5) {return params;}var vars = hash.split('&');for (var i = 0; i < vars.length; i++) {if (!vars[i]) {continue;}var pair = vars[i].split('=');if (pair.length < 2) {continue;}params[pair[0]] = pair[1];}if (params.gid) {params.gid = parseInt(params.gid, 10);}return params;};var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {var pswpElement = document.querySelectorAll('.pswp')[0],gallery,options,items;items = parseThumbnailElements(galleryElement);// 這里可以定義參數options = {barsSize: {top: 100,bottom: 100},fullscreenEl: false,shareButtons: [{id: 'wechat', label: '分享微信', url: '#'},{id: 'weibo', label: '新浪微博', url: '#'},{id: 'download', label: '保存圖片', url: '{{raw_image_url}}', download: true}],// define gallery index (for URL)galleryUID: galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn: function (index) {// See Options -> getThumbBoundsFn section of documentation for more infovar thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnailpageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail.getBoundingClientRect();return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};}};// PhotoSwipe opened from URLif (fromURL) {if (options.galleryPIDs) {// parse real index when custom PIDs are used for (var j = 0; j < items.length; j++) {if (items[j].pid == index) {options.index = j;break;}}} else {// in URL indexes start from 1options.index = parseInt(index, 10) - 1;}} else {options.index = parseInt(index, 10);}// exit if index not foundif (isNaN(options.index)) {return;}if (disableAnimation) {options.showAnimationDuration = 0;}// Pass data to PhotoSwipe and initialize itgallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);gallery.init();};// loop through all gallery elements and bind events//alert(33);var galleryElements = document.querySelectorAll(gallerySelector);//console.log(galleryElements);for (var i = 0, l = galleryElements.length; i < l; i++) {galleryElements[i].setAttribute('data-pswp-uid', i + 1);galleryElements[i].onclick = onThumbnailsClick;}// Parse URL and open gallery if it contains #&pid=3&gid=1var hashData = photoswipeParseHash();//console.log(hashData);if (hashData.pid && hashData.gid) {openPhotoSwipe(hashData.pid, galleryElements[ hashData.gid - 1 ], true, true);} };// execute above function //console.log($(".my-gallery").length); initPhotoSwipeFromDOM('.my-gallery');
html中加入

<div class="my-gallery"><figure><div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 90%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div></figure><figure><div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 90%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div></figure></div>
然后打開文件，圖片可以放大。你以為這樣就玩了嗎？然后我把此處放到循環中

var commentList = Vue.extend({template: '<ul class="commentlist">' +'<li class="commentlistli" v-for="comlist in comment.list">' +'<div class="left wb20"><a class="commenthead"><img :src="jointhead(comlist.avatar)"></a></div>' +'<div class="right wb78">' +'<p><a class="commentname">{{comlist.user_name}}</a></p>' +'<span class="comment" v-html="htmlspecialchars_decode(comlist.comment)"></span>' +'<div class="my-gallery" data-pswp-uid="3">' +'<figure>' +'<div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 30%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div>' +'</figure>' +'</div>' +'</div>' +'<div class="clear"></div>' +'</li>' +'</ul>',props: ['comment'],methods: {jointhead: function (str) {if (str.indexOf('http') < 0) {return "/" + str;} else {return str;}},htmlspecialchars_decode: function (str) {str = str.replace(/&/g, '&');str = str.replace(/</g, '<');str = str.replace(/>/g, '>');str = str.replace(/"/g, '"');str = str.replace(/'/g, '"');str = str.replace(/width="40"/g, '');str = str.replace(/width=40/g, '');str = str.replace(/height="40"/g, '');str = str.replace(/height=40/g, '');str = str.replace(/width="50"/g, '');str = str.replace(/width=50/g, '');str = str.replace(/height="50"/g, '');str = str.replace(/height=50/g, '');return str;},},})
圖片不能放大了！！！

圖片不能放大了！！！

這是為什么呢？因為調用

initPhotoSwipeFromDOM('.my-gallery');的時候還沒有加載完成。

根據vue的執行過程發現有個updated方法，updated的作用是在data發生變化渲染更新視圖之后觸發。

于是上面的代碼加了一個updated

var commentList = Vue.extend({template: '<ul class="commentlist">' +'<li class="commentlistli" v-for="comlist in comment.list">' +'<div class="left wb20"><a class="commenthead"><img :src="jointhead(comlist.avatar)"></a></div>' +'<div class="right wb78">' +'<p><a class="commentname">{{comlist.user_name}}</a></p>' +'<span class="comment" v-html="htmlspecialchars_decode(comlist.comment)"></span>' +'<div class="my-gallery" data-pswp-uid="3">' +'<figure>' +'<div><a href="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg" data-size="500x500"><img style="width: 30%;" src="http://img.fwxgx.com/uploads/2017/10/15083006520349_24464577.jpg"></a></div>' +'</figure>' +'</div>' +'</div>' +'<div class="clear"></div>' +'</li>' +'</ul>',props: ['comment'],methods: {jointhead: function (str) {if (str.indexOf('http') < 0) {return "/" + str;} else {return str;}},htmlspecialchars_decode: function (str) {str = str.replace(/&/g, '&');str = str.replace(/</g, '<');str = str.replace(/>/g, '>');str = str.replace(/"/g, '"');str = str.replace(/'/g, '"');str = str.replace(/width="40"/g, '');str = str.replace(/width=40/g, '');str = str.replace(/height="40"/g, '');str = str.replace(/height=40/g, '');str = str.replace(/width="50"/g, '');str = str.replace(/width=50/g, '');str = str.replace(/height="50"/g, '');str = str.replace(/height=50/g, '');return str;},},updated: function () {initPhotoSwipeFromDOM('.my-gallery');}, })
再打開果然通過。

總結

以上是生活随笔為你收集整理的vue+photoswipe的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。