From 3b1d8fbd9ad7b1d5cc50240207affd2979b4090b Mon Sep 17 00:00:00 2001 From: toesbieya <1647775459@qq.com> Date: Sat, 18 Jul 2020 17:00:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue/package.json | 1 - vue/public/index.html | 13 +- .../static/lightgallery/lg-pager.min.js | 7 + .../static/lightgallery/lg-thumbnail.min.js | 7 + vue/public/static/lightgallery/lg-zoom.min.js | 7 + vue/src/components/ImageViewer/index.js | 43 +++--- vue/src/components/ImageViewer/main.vue | 27 ---- vue/src/router/constant/modules/example.js | 6 - .../picturePreviewExample/PhotoSwipe.vue | 134 ------------------ .../picturePreviewExample/index.vue | 77 ---------- 10 files changed, 51 insertions(+), 271 deletions(-) create mode 100644 vue/public/static/lightgallery/lg-pager.min.js create mode 100644 vue/public/static/lightgallery/lg-thumbnail.min.js create mode 100644 vue/public/static/lightgallery/lg-zoom.min.js delete mode 100644 vue/src/components/ImageViewer/main.vue delete mode 100644 vue/src/views/example/components/picturePreviewExample/PhotoSwipe.vue delete mode 100644 vue/src/views/example/components/picturePreviewExample/index.vue diff --git a/vue/package.json b/vue/package.json index 029f10c..2dda380 100644 --- a/vue/package.json +++ b/vue/package.json @@ -20,7 +20,6 @@ "path-to-regexp": "^6.1.0", "popper.js": "^1.16.1", "socket.io-client": "^2.3.0", - "v-viewer": "^1.5.1", "vue": "^2.6.11", "vue-count-to": "^1.0.13", "vue-cropper": "^0.5.4", diff --git a/vue/public/index.html b/vue/public/index.html index 4c5fa3b..258a5b6 100644 --- a/vue/public/index.html +++ b/vue/public/index.html @@ -37,13 +37,12 @@ - - - - - - - + + + + + + diff --git a/vue/public/static/lightgallery/lg-pager.min.js b/vue/public/static/lightgallery/lg-pager.min.js new file mode 100644 index 0000000..cd1cf31 --- /dev/null +++ b/vue/public/static/lightgallery/lg-pager.min.js @@ -0,0 +1,7 @@ +/**! + * lg-pager.js | 1.0.0 | October 5th 2016 + * http://sachinchoolur.github.io/lg-pager.js + * Copyright (c) 2016 Sachin N; + * @license GPLv3 + */ +!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.LgPager=e()}}(function(){var e,t,r;return function e(t,r,n){function o(i,a){if(!r[i]){if(!t[i]){var l="function"==typeof require&&require;if(!a&&l)return l(i,!0);if(s)return s(i,!0);var c=new Error("Cannot find module '"+i+"'");throw c.code="MODULE_NOT_FOUND",c}var u=r[i]={exports:{}};t[i][0].call(u.exports,function(e){var r=t[i][1][e];return o(r?r:e)},u,u.exports,e,t,r,n)}return r[i].exports}for(var s="function"==typeof require&&require,i=0;i1&&this.init(),this};r.prototype.init=function(){var e=this,t="",r,n,o;if(e.core.outer.querySelector(".lg").insertAdjacentHTML("beforeend",'
'),e.core.s.dynamic)for(var s=0;s
';else for(var i=0;i
':'
';n=e.core.outer.querySelector(".lg-pager-outer"),n.innerHTML=t,r=e.core.outer.querySelectorAll(".lg-pager-cont");for(var a=0;a1&&(this.core.s.showThumbByDefault&&setTimeout(function(){utils.addClass(t.core.outer,"lg-thumb-open")},700),this.core.s.pullCaptionUp&&utils.addClass(this.core.outer,"lg-pull-caption-up"),this.build(),this.core.s.animateThumb?(this.core.s.enableThumbDrag&&!this.core.isTouch&&this.core.doCss()&&this.enableThumbDrag(),this.core.s.enableThumbSwipe&&this.core.isTouch&&this.core.doCss()&&this.enableThumbSwipe(),this.thumbClickable=!1):this.thumbClickable=!0,this.toggle(),this.thumbkeyPress())},i.prototype.build=function(){function t(t,u,r){var s=e.core.isVideo(t,r)||{},l,h="";s.youtube||s.vimeo||s.dailymotion?s.youtube?l=e.core.s.loadYoutubeThumbnail?"//img.youtube.com/vi/"+s.youtube[1]+"/"+e.core.s.youtubeThumbSize+".jpg":u:s.vimeo?e.core.s.loadVimeoThumbnail?(l="//i.vimeocdn.com/video/error_"+o+".jpg",h=s.vimeo[1]):l=u:s.dailymotion&&(l=e.core.s.loadDailymotionThumbnail?"//www.dailymotion.com/thumbnail/video/"+s.dailymotion[1]:u):l=u,i+='
',h=""}var e=this,i="",o="",u,r='
';switch(this.core.s.vimeoThumbSize){case"thumbnail_large":o="640";break;case"thumbnail_medium":o="200x150";break;case"thumbnail_small":o="100x75"}if(utils.addClass(e.core.outer,"lg-has-thumb"),e.core.outer.querySelector(".lg").insertAdjacentHTML("beforeend",r),e.thumbOuter=e.core.outer.querySelector(".lg-thumb-outer"),e.thumbOuterWidth=e.thumbOuter.offsetWidth,e.core.s.animateThumb&&(e.core.outer.querySelector(".lg-thumb").style.width=e.thumbTotalWidth+"px",e.core.outer.querySelector(".lg-thumb").style.position="relative"),this.core.s.animateThumb&&(e.thumbOuter.style.height=e.core.s.thumbContHeight+"px"),e.core.s.dynamic)for(var s=0;sthis.thumbTotalWidth-this.thumbOuterWidth&&(this.left=this.thumbTotalWidth-this.thumbOuterWidth),this.left<0&&(this.left=0),this.core.lGalleryOn?(utils.hasClass(e,"on")||utils.setVendor(this.core.outer.querySelector(".lg-thumb"),"TransitionDuration",this.core.s.speed+"ms"),this.core.doCss()||(e.style.left=-this.left+"px")):this.core.doCss()||(e.style.left=-this.left+"px"),this.setTranslate(this.left)}},i.prototype.enableThumbDrag=function(){var t=this,e=0,i=0,o=!1,u=!1,r=0;utils.addClass(t.thumbOuter,"lg-grab"),utils.on(t.core.outer.querySelector(".lg-thumb"),"mousedown.lgthumb",function(i){t.thumbTotalWidth>t.thumbOuterWidth&&(i.preventDefault(),e=i.pageX,o=!0,t.core.outer.scrollLeft+=1,t.core.outer.scrollLeft-=1,t.thumbClickable=!1,utils.removeClass(t.thumbOuter,"lg-grab"),utils.addClass(t.thumbOuter,"lg-grabbing"))}),utils.on(window,"mousemove.lgthumb",function(s){o&&(r=t.left,u=!0,i=s.pageX,utils.addClass(t.thumbOuter,"lg-dragging"),r-=i-e,r>t.thumbTotalWidth-t.thumbOuterWidth&&(r=t.thumbTotalWidth-t.thumbOuterWidth),r<0&&(r=0),t.setTranslate(r))}),utils.on(window,"mouseup.lgthumb",function(){u?(u=!1,utils.removeClass(t.thumbOuter,"lg-dragging"),t.left=r,Math.abs(i-e)t.thumbOuterWidth&&(i.preventDefault(),e=i.targetTouches[0].pageX,t.thumbClickable=!1)}),utils.on(t.core.outer.querySelector(".lg-thumb"),"touchmove.lg",function(r){t.thumbTotalWidth>t.thumbOuterWidth&&(r.preventDefault(),i=r.targetTouches[0].pageX,o=!0,utils.addClass(t.thumbOuter,"lg-dragging"),u=t.left,u-=i-e,u>t.thumbTotalWidth-t.thumbOuterWidth&&(u=t.thumbTotalWidth-t.thumbOuterWidth),u<0&&(u=0),t.setTranslate(u))}),utils.on(t.core.outer.querySelector(".lg-thumb"),"touchend.lg",function(){t.thumbTotalWidth>t.thumbOuterWidth&&o?(o=!1,utils.removeClass(t.thumbOuter,"lg-dragging"),Math.abs(i-e)'),utils.on(t.core.outer.querySelector(".lg-toggle-thumb"),"click.lg",function(){utils.hasClass(t.core.outer,"lg-thumb-open")?utils.removeClass(t.core.outer,"lg-thumb-open"):utils.addClass(t.core.outer,"lg-thumb-open")}))},i.prototype.thumbkeyPress=function(){var t=this;utils.on(window,"keydown.lgthumb",function(e){38===e.keyCode?(e.preventDefault(),utils.addClass(t.core.outer,"lg-thumb-open")):40===e.keyCode&&(e.preventDefault(),utils.removeClass(t.core.outer,"lg-thumb-open"))})},i.prototype.destroy=function(t){if(this.core.s.thumbnail&&this.core.items.length>1){utils.off(window,".lgthumb"),t||this.thumbOuter.parentNode.removeChild(this.thumbOuter),utils.removeClass(this.core.outer,"lg-has-thumb");for(var e=document.getElementsByClassName("lg-script");e[0];)e[0].parentNode.removeChild(e[0])}},window.lgModules.thumbnail=i})},{}]},{},[1])(1)}); \ No newline at end of file diff --git a/vue/public/static/lightgallery/lg-zoom.min.js b/vue/public/static/lightgallery/lg-zoom.min.js new file mode 100644 index 0000000..f1b0def --- /dev/null +++ b/vue/public/static/lightgallery/lg-zoom.min.js @@ -0,0 +1,7 @@ +/**! + * lg-zoom.js | 1.2.0 | May 20th 2020 + * http://sachinchoolur.github.io/lg-zoom.js + * Copyright (c) 2016 Sachin N; + * @license GPLv3 + */ +!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.LgZoom=e()}}(function(){var e,t,o;return function(){function e(t,o,r){function l(a,s){if(!o[a]){if(!t[a]){var n="function"==typeof require&&require;if(!s&&n)return n(a,!0);if(i)return i(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var c=o[a]={exports:{}};t[a][0].call(c.exports,function(e){return l(t[a][1][e]||e)},c,c.exports,e,t,o,r)}return o[a].exports}for(var i="function"==typeof require&&require,a=0;a';e.core.s.actualSize&&(t+=''),e.core.s.useLeftForZoom?utils.addClass(e.core.outer,"lg-use-left-for-zoom"):utils.addClass(e.core.outer,"lg-use-transition-for-zoom"),this.core.outer.querySelector(".lg-toolbar").insertAdjacentHTML("beforeend",t),utils.on(e.core.el,"onSlideItemLoad.lgtmzoom",function(t){var o=e.core.s.enableZoomAfter+t.detail.delay;utils.hasClass(document.body,"lg-from-hash")&&t.detail.delay?o=0:utils.removeClass(document.body,"lg-from-hash"),e.zoomabletimeout=setTimeout(function(){utils.addClass(e.core.___slide[t.detail.index],"lg-zoomable")},o+30)});var o=1,r=function t(o){var r=e.core.outer.querySelector(".lg-current .lg-image"),l,i,a=(window.innerWidth-r.clientWidth)/2,s=(window.innerHeight-r.clientHeight)/2+(document.documentElement.scrollTop||document.body.scrollTop);l=e.pageX-a,i=e.pageY-s;var n=(o-1)*l,u=(o-1)*i;utils.setVendor(r,"Transform","scale3d("+o+", "+o+", 1)"),r.setAttribute("data-scale",o),e.core.s.useLeftForZoom?(r.parentElement.style.left=-n+"px",r.parentElement.style.top=-u+"px"):utils.setVendor(r.parentElement,"Transform","translate3d(-"+n+"px, -"+u+"px, 0)"),r.parentElement.setAttribute("data-x",n),r.parentElement.setAttribute("data-y",u)},l=function t(){o>1?utils.addClass(e.core.outer,"lg-zoomed"):e.resetZoom(),o<1&&(o=1),r(o)},i=function t(r,i,a,s){var n=i.clientWidth,u;u=e.core.s.dynamic?e.core.s.dynamicEl[a].width||i.naturalWidth||n:e.core.items[a].getAttribute("data-width")||i.naturalWidth||n;var c;utils.hasClass(e.core.outer,"lg-zoomed")?o=1:u>n&&(c=u/n,o=c||2),s?(e.pageX=window.innerWidth/2,e.pageY=window.innerHeight/2+(document.documentElement.scrollTop||document.body.scrollTop)):(e.pageX=r.pageX||r.targetTouches[0].pageX,e.pageY=r.pageY||r.targetTouches[0].pageY),l(),setTimeout(function(){utils.removeClass(e.core.outer,"lg-grabbing"),utils.addClass(e.core.outer,"lg-grab")},10)},a=!1;utils.on(e.core.el,"onAferAppendSlide.lgtmzoom",function(t){var o=t.detail.index,r=e.core.___slide[o].querySelector(".lg-image");e.core.isTouch||utils.on(r,"dblclick",function(e){i(e,r,o)}),e.core.isTouch&&utils.on(r,"touchstart",function(e){a?(clearTimeout(a),a=null,i(e,r,o)):a=setTimeout(function(){a=null},300),e.preventDefault()})}),utils.on(window,"resize.lgzoom scroll.lgzoom orientationchange.lgzoom",function(){e.pageX=window.innerWidth/2,e.pageY=window.innerHeight/2+(document.documentElement.scrollTop||document.body.scrollTop),r(o)}),utils.on(document.getElementById("lg-zoom-out"),"click.lg",function(){e.core.outer.querySelector(".lg-current .lg-image")&&(o-=e.core.s.scale,l())}),utils.on(document.getElementById("lg-zoom-in"),"click.lg",function(){e.core.outer.querySelector(".lg-current .lg-image")&&(o+=e.core.s.scale,l())}),utils.on(document.getElementById("lg-actual-size"),"click.lg",function(t){i(t,e.core.___slide[e.core.index].querySelector(".lg-image"),e.core.index,!0)}),utils.on(e.core.el,"onBeforeSlide.lgtm",function(){o=1,e.resetZoom()}),e.core.isTouch||e.zoomDrag(),e.core.isTouch&&e.zoomSwipe()},r.prototype.resetZoom=function(){utils.removeClass(this.core.outer,"lg-zoomed");for(var e=0;ee.core.outer.querySelector(".lg").clientHeight,l=r.offsetWidth*r.getAttribute("data-scale")>e.core.outer.querySelector(".lg").clientWidth,(l||i)&&(o.preventDefault(),t={x:o.targetTouches[0].pageX,y:o.targetTouches[0].pageY})}});for(var s=0;s15||Math.abs(o.y-t.y)>15)&&(e.core.s.useLeftForZoom?(s.style.left=n+"px",s.style.top=u+"px"):utils.setVendor(s,"Transform","translate3d("+n+"px, "+u+"px, 0)"))}});for(var n=0;ne.core.outer.querySelector(".lg").clientHeight,i=l.offsetWidth*l.getAttribute("data-scale")>e.core.outer.querySelector(".lg").clientWidth,utils.hasClass(e.core.outer,"lg-zoomed")&&utils.hasClass(o.target,"lg-object")&&(i||a)&&(o.preventDefault(),t={x:o.pageX,y:o.pageY},r=!0,e.core.outer.scrollLeft+=1,e.core.outer.scrollLeft-=1,utils.removeClass(e.core.outer,"lg-grab"),utils.addClass(e.core.outer,"lg-grabbing"))});utils.on(window,"mousemove.lgzoom",function(s){if(r){var n=e.core.___slide[e.core.index].querySelector(".lg-img-wrap"),u,c;l=!0,o={x:s.pageX,y:s.pageY},utils.addClass(e.core.outer,"lg-zoom-dragging"),c=a?-Math.abs(n.getAttribute("data-y"))+(o.y-t.y):-Math.abs(n.getAttribute("data-y")),u=i?-Math.abs(n.getAttribute("data-x"))+(o.x-t.x):-Math.abs(n.getAttribute("data-x")),e.core.s.useLeftForZoom?(n.style.left=u+"px",n.style.top=c+"px"):utils.setVendor(n,"Transform","translate3d("+u+"px, "+c+"px, 0)")}}),utils.on(window,"mouseup.lgzoom",function(s){r&&(r=!1,utils.removeClass(e.core.outer,"lg-zoom-dragging"),!l||t.x===o.x&&t.y===o.y||(o={x:s.pageX,y:s.pageY},e.touchendZoom(t,o,i,a)),l=!1),utils.removeClass(e.core.outer,"lg-grabbing"),utils.addClass(e.core.outer,"lg-grab")})},r.prototype.touchendZoom=function(e,t,o,r){var l=this,i=l.core.___slide[l.core.index].querySelector(".lg-img-wrap"),a=l.core.___slide[l.core.index].querySelector(".lg-object"),s=-Math.abs(i.getAttribute("data-x"))+(t.x-e.x),n=-Math.abs(i.getAttribute("data-y"))+(t.y-e.y),u=(l.core.outer.querySelector(".lg").clientHeight-a.offsetHeight)/2,c=Math.abs(a.offsetHeight*Math.abs(a.getAttribute("data-scale"))-l.core.outer.querySelector(".lg").clientHeight+u),d=(l.core.outer.querySelector(".lg").clientWidth-a.offsetWidth)/2,g=Math.abs(a.offsetWidth*Math.abs(a.getAttribute("data-scale"))-l.core.outer.querySelector(".lg").clientWidth+d);(Math.abs(t.x-e.x)>15||Math.abs(t.y-e.y)>15)&&(r&&(n<=-c?n=-c:n>=-u&&(n=-u)),o&&(s<=-g?s=-g:s>=-d&&(s=-d)),r?i.setAttribute("data-y",Math.abs(n)):n=-Math.abs(i.getAttribute("data-y")),o?i.setAttribute("data-x",Math.abs(s)):s=-Math.abs(i.getAttribute("data-x")),l.core.s.useLeftForZoom?(i.style.left=s+"px",i.style.top=n+"px"):utils.setVendor(i,"Transform","translate3d("+s+"px, "+n+"px, 0)"))},r.prototype.destroy=function(){var e=this;utils.off(e.core.el,".lgzoom"),utils.off(window,".lgzoom");for(var t=0;t window.lgData[div.getAttribute('lg-uid')].destroy(true), + false + ) + insertEl = true } - instance.urlList = urlList || [] - instance.index = index - instance.value = true - return instance + + window.lightGallery(document.getElementById('light-gallery-el'), { + index, + download: false, + dynamic: true, + dynamicEl: urlList.map(src => ({src, thumb: src})) + }) } image.close = function () { - if (instance) { - instance.close() - instance = null - } + } export default image diff --git a/vue/src/components/ImageViewer/main.vue b/vue/src/components/ImageViewer/main.vue deleted file mode 100644 index 9db009f..0000000 --- a/vue/src/components/ImageViewer/main.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - diff --git a/vue/src/router/constant/modules/example.js b/vue/src/router/constant/modules/example.js index ea5fd0e..e6ae09f 100644 --- a/vue/src/router/constant/modules/example.js +++ b/vue/src/router/constant/modules/example.js @@ -54,12 +54,6 @@ const router = { component: () => lazyLoadView(import('@/views/example/components/uploadExample')), meta: {title: '上传文件'} }, - { - path: 'picturePreviewExample', - name: 'picturePreviewExample', - component: () => lazyLoadView(import('@/views/example/components/picturePreviewExample')), - meta: {title: '图片预览'} - }, { path: 'skeletonExample', name: 'skeletonExample', diff --git a/vue/src/views/example/components/picturePreviewExample/PhotoSwipe.vue b/vue/src/views/example/components/picturePreviewExample/PhotoSwipe.vue deleted file mode 100644 index 17c820e..0000000 --- a/vue/src/views/example/components/picturePreviewExample/PhotoSwipe.vue +++ /dev/null @@ -1,134 +0,0 @@ - - - diff --git a/vue/src/views/example/components/picturePreviewExample/index.vue b/vue/src/views/example/components/picturePreviewExample/index.vue deleted file mode 100644 index 00be102..0000000 --- a/vue/src/views/example/components/picturePreviewExample/index.vue +++ /dev/null @@ -1,77 +0,0 @@ - - -