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' |
||||
import Main from './main.vue' |
||||
let insertEl = false |
||||
|
||||
const ImageViewerConstructor = Vue.extend(Main) |
||||
|
||||
let instance |
||||
const image = function ({index = 0, urlList}) { |
||||
if (!window.lightGallery || !Array.isArray(urlList) || urlList.length < 1) { |
||||
return |
||||
} |
||||
|
||||
const image = function ({index, urlList}) { |
||||
if (instance) instance.close() |
||||
else { |
||||
instance = new ImageViewerConstructor({data: {index, urlList}}) |
||||
instance.$mount() |
||||
document.body.appendChild(instance.$el) |
||||
if (!insertEl) { |
||||
const div = document.createElement('div') |
||||
div.setAttribute('id', 'light-gallery-el') |
||||
div.style.display = 'none' |
||||
document.body.appendChild(div) |
||||
div.addEventListener( |
||||
'onCloseAfter', |
||||
() => 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 |
||||
|
||||
@ -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