toesbieya
6 years ago
parent
a6d38b1454
commit
3b1d8fbd9a
@ -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;i<n.length;i++)o(n[i]);return o}({1:[function(t,r,n){!function(t,r){if("function"==typeof e&&e.amd)e([],r);else if("undefined"!=typeof n)r();else{var o={exports:{}};r(),t.lgPager=o.exports}}(this,function(){"use strict";var e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},t={pager:!1},r=function r(n){return this.el=n,this.core=window.lgData[this.el.getAttribute("lg-uid")],this.core.s=e({},t,this.core.s),this.core.s.pager&&this.core.items.length>1&&this.init(),this};r.prototype.init=function(){var e=this,t="",r,n,o;if(e.core.outer.querySelector(".lg").insertAdjacentHTML("beforeend",'<div class="lg-pager-outer"></div>'),e.core.s.dynamic)for(var s=0;s<e.core.s.dynamicEl.length;s++)t+='<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="'+e.core.s.dynamicEl[s].thumb+'" /></div></span>';else for(var i=0;i<e.core.items.length;i++)t+=e.core.s.exThumbImage?'<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="'+e.core.items[i].getAttribute(e.core.s.exThumbImage)+'" /></div></span>':'<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="'+e.core.items[i].querySelector("img").getAttribute("src")+'" /></div></span>';n=e.core.outer.querySelector(".lg-pager-outer"),n.innerHTML=t,r=e.core.outer.querySelectorAll(".lg-pager-cont");for(var a=0;a<r.length;a++)!function(t){utils.on(r[t],"click.lg touchend.lg",function(){e.core.index=t,e.core.slide(e.core.index,!1,!1)})}(a);utils.on(n,"mouseover.lg",function(){clearTimeout(o),utils.addClass(n,"lg-pager-hover")}),utils.on(n,"mouseout.lg",function(){o=setTimeout(function(){utils.removeClass(n,"lg-pager-hover")})}),utils.on(e.core.el,"onBeforeSlide.lgtm",function(e){for(var t=0;t<r.length;t++)utils.removeClass(r[t],"lg-pager-active"),e.detail.index===t&&utils.addClass(r[t],"lg-pager-active")})},r.prototype.destroy=function(){},window.lgModules.pager=r})},{}]},{},[1])(1)}); |
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,28 +1,33 @@ |
|||||||
import Vue from 'vue' |
let insertEl = false |
||||||
import Main from './main.vue' |
|
||||||
|
|
||||||
const ImageViewerConstructor = Vue.extend(Main) |
const image = function ({index = 0, urlList}) { |
||||||
|
if (!window.lightGallery || !Array.isArray(urlList) || urlList.length < 1) { |
||||||
let instance |
return |
||||||
|
} |
||||||
|
|
||||||
const image = function ({index, urlList}) { |
if (!insertEl) { |
||||||
if (instance) instance.close() |
const div = document.createElement('div') |
||||||
else { |
div.setAttribute('id', 'light-gallery-el') |
||||||
instance = new ImageViewerConstructor({data: {index, urlList}}) |
div.style.display = 'none' |
||||||
instance.$mount() |
document.body.appendChild(div) |
||||||
document.body.appendChild(instance.$el) |
div.addEventListener( |
||||||
|
'onCloseAfter', |
||||||
|
() => window.lgData[div.getAttribute('lg-uid')].destroy(true), |
||||||
|
false |
||||||
|
) |
||||||
|
insertEl = true |
||||||
} |
} |
||||||
instance.urlList = urlList || [] |
|
||||||
instance.index = index |
window.lightGallery(document.getElementById('light-gallery-el'), { |
||||||
instance.value = true |
index, |
||||||
return instance |
download: false, |
||||||
|
dynamic: true, |
||||||
|
dynamicEl: urlList.map(src => ({src, thumb: src})) |
||||||
|
}) |
||||||
} |
} |
||||||
|
|
||||||
image.close = function () { |
image.close = function () { |
||||||
if (instance) { |
|
||||||
instance.close() |
|
||||||
instance = null |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
export default image |
export default image |
||||||
|
|||||||
@ -1,27 +0,0 @@ |
|||||||
<template> |
|
||||||
<el-image-viewer v-if="value" :initial-index="index" :on-close="close" :url-list="urlList" :z-index="200000"/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import ImageViewer from 'element-ui/packages/image/src/image-viewer' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "ImageViewer", |
|
||||||
|
|
||||||
components: {ElImageViewer: ImageViewer}, |
|
||||||
|
|
||||||
data() { |
|
||||||
return { |
|
||||||
value: false, |
|
||||||
index: 0, |
|
||||||
urlList: [] |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
close() { |
|
||||||
this.value = false |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,134 +0,0 @@ |
|||||||
<template> |
|
||||||
<div aria-hidden="true" class="pswp" role="dialog" tabindex="-1"> |
|
||||||
|
|
||||||
<!-- Background of PhotoSwipe. |
|
||||||
It's a separate element as animating opacity is faster than rgba(). --> |
|
||||||
<div class="pswp__bg"></div> |
|
||||||
|
|
||||||
<!-- Slides wrapper with overflow:hidden. --> |
|
||||||
<div class="pswp__scroll-wrap"> |
|
||||||
|
|
||||||
<!-- Container that holds slides. |
|
||||||
PhotoSwipe keeps only 3 of them in the DOM to save memory. |
|
||||||
Don't modify these 3 pswp__item elements, data is added later on. --> |
|
||||||
<div class="pswp__container"> |
|
||||||
<div class="pswp__item"></div> |
|
||||||
<div class="pswp__item"></div> |
|
||||||
<div class="pswp__item"></div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> |
|
||||||
<div class="pswp__ui pswp__ui--hidden"> |
|
||||||
|
|
||||||
<div class="pswp__top-bar"> |
|
||||||
|
|
||||||
<!-- Controls are self-explanatory. Order can be changed. --> |
|
||||||
|
|
||||||
<div class="pswp__counter"></div> |
|
||||||
|
|
||||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button> |
|
||||||
|
|
||||||
<button class="pswp__button pswp__button--share" title="Share"></button> |
|
||||||
|
|
||||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> |
|
||||||
|
|
||||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> |
|
||||||
|
|
||||||
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR --> |
|
||||||
<!-- element will get class pswp__preloader--active when preloader is running --> |
|
||||||
<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> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
/* |
|
||||||
* https://photoswipe.com/ |
|
||||||
* 需要加载以下文件 |
|
||||||
* photoSwipe/photoswipe.css |
|
||||||
* photoSwipe/default-skin/default-skin.css |
|
||||||
* photoSwipe/photoswipe.js |
|
||||||
* photoSwipe/photoswipe-ui-default.js |
|
||||||
* */ |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "PhotoSwipe", |
|
||||||
props: { |
|
||||||
data: {type: Array, default: () => []}, |
|
||||||
index: {type: Number, default: 0}, |
|
||||||
options: Object |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
gallery: null, |
|
||||||
photoSwipeOptions: { |
|
||||||
index: 0,//初始索引 |
|
||||||
escKey: true, |
|
||||||
closeOnScroll: false,//滚动时是否关闭 |
|
||||||
closeOnVerticalDrag: false,//垂直拖动为缩放的图片时是否关闭 |
|
||||||
history: false,//是否启用url历史 |
|
||||||
}, |
|
||||||
uiOptions: { |
|
||||||
timeToIdle: 2000,//鼠标停止移动后多久隐藏ui，单位毫秒 |
|
||||||
timeToIdleOutside: 0,//鼠标移出可视窗口后多久隐藏ui，单位毫秒 |
|
||||||
|
|
||||||
/*按钮显示*/ |
|
||||||
closeEl: true, |
|
||||||
captionEl: true, |
|
||||||
fullscreenEl: true, |
|
||||||
zoomEl: true, |
|
||||||
shareEl: false, |
|
||||||
counterEl: true, |
|
||||||
arrowEl: true, |
|
||||||
preloaderEl: true, |
|
||||||
|
|
||||||
clickToCloseNonZoomable: false |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
mergeOptions() { |
|
||||||
this.photoSwipeOptions.index = this.index |
|
||||||
if (!this.options) return {...this.photoSwipeOptions, ...this.uiOptions} |
|
||||||
Object.keys(this.options).forEach(key => { |
|
||||||
if (key in this.photoSwipeOptions) { |
|
||||||
this.photoSwipeOptions[key] = this.options[key] |
|
||||||
} |
|
||||||
else if (key in this.uiOptions) { |
|
||||||
this.uiOptions[key] = this.options[key] |
|
||||||
} |
|
||||||
}) |
|
||||||
return {...this.photoSwipeOptions, ...this.uiOptions} |
|
||||||
}, |
|
||||||
show() { |
|
||||||
this.gallery = new window.PhotoSwipe(this.$el, window.PhotoSwipeUI_Default, this.data, this.mergeOptions()) |
|
||||||
this.gallery.init() |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,77 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="tip-row"> |
|
||||||
<span>PhotoSwipe演示</span> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<img v-for="(img,index) in data" :src="img.src" @click="showPhoto(index)"/> |
|
||||||
</div> |
|
||||||
<PhotoSwipe ref="photoSwipe" :data="data" :index="photoSwipeIndex"/> |
|
||||||
|
|
||||||
<div class="tip-row"> |
|
||||||
<span>v-viewer演示</span> |
|
||||||
</div> |
|
||||||
<div v-viewer.static> |
|
||||||
<img v-for="(img,index) in data" :src="img.src" :alt="`hello ${index}`"/> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="tip-row"> |
|
||||||
<span>element-ui自带预览组件演示</span> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<img v-for="(img,index) in data" :src="img.src" @click="showElImageViewer(index)"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import PhotoSwipe from "./PhotoSwipe" |
|
||||||
import Vue from 'vue' |
|
||||||
import Viewer from 'v-viewer' |
|
||||||
|
|
||||||
Vue.use(Viewer) |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "picturePreviewExample", |
|
||||||
components: {PhotoSwipe}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
data: [ |
|
||||||
{ |
|
||||||
src: 'https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-1.jpg', |
|
||||||
h: 1920, |
|
||||||
w: 1080, |
|
||||||
title: 'hello' |
|
||||||
}, |
|
||||||
{ |
|
||||||
src: 'https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-2.jpg', |
|
||||||
h: 800, |
|
||||||
w: 1200 |
|
||||||
}, |
|
||||||
{ |
|
||||||
src: 'https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-3.jpg', |
|
||||||
h: 800, |
|
||||||
w: 1200 |
|
||||||
} |
|
||||||
], |
|
||||||
photoSwipeIndex: 0, |
|
||||||
showElViewer: false, |
|
||||||
elViewerIndex: 0, |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
previewSrcList() { |
|
||||||
return this.data.map(i => i.src) |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
showPhoto(index) { |
|
||||||
this.photoSwipeIndex = index |
|
||||||
this.$nextTick(() => this.$refs.photoSwipe.show()) |
|
||||||
}, |
|
||||||
showElImageViewer(index) { |
|
||||||
this.$image({index, urlList: this.previewSrcList}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
Loading…
Reference in new issue