images-viewer-vue3
Version:
A lightweight image viewer for Vue3
60 lines (59 loc) • 16.3 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("@charset \"UTF-8\";.hotkey-tip__wrap[data-v-f9972721]{padding:.5rem;border-radius:.66rem;background:#000c;bottom:10px;right:10px;position:fixed;opacity:0;transition:opacity .3s ease-in-out}.hotkey-tip__wrap.is-active_key[data-v-f9972721]{opacity:.8}.hotkey-tip__wrap .item-key[data-v-f9972721]{border-radius:.2rem;display:inline-block;text-transform:capitalize;margin-inline-start:.2em;margin-inline-end:.2em;margin-block-start:.2em;margin-block-end:.2em;color:#eee}.mobile-vierwer__wrapper[data-v-b2851325]{margin:auto 0}.mobile-vierwer__wrapper.cus-img-preview[data-v-b2851325]{width:100%;position:relative;overflow:hidden}.mobile-vierwer__wrapper.cus-img-preview ul[data-v-b2851325]{display:flex;flex-wrap:nowrap;align-items:center}.mobile-vierwer__wrapper.cus-img-preview ul li .viewer-image[data-v-b2851325]{width:100%;height:100%;object-fit:cover;max-width:100%;max-height:100%}.loading-image__wrap .item1[data-v-7c175f68]{animation-delay:var(--i);background:#10ac84;box-shadow:0 0 15px #10ac84}.loading-image__wrap .item2[data-v-7c175f68]{animation-delay:var(--i);background:#14ffec;box-shadow:0 0 15px #14ffec}.loading-image__wrap .item3[data-v-7c175f68]{animation-delay:var(--i);background:#c62a88;box-shadow:0 0 15px #c62a88}.loading-image__wrap span[data-v-7c175f68]{display:inline-block;width:calc(var(--load-size, 40) * 1px);aspect-ratio:1;border-radius:50%;margin:0 6px;animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite;-webkit-animation:loading-7c175f68 1.4s cubic-bezier(0,.55,.45,1) infinite}@-webkit-keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loading-7c175f68{0%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}40%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.nav-image-loading__wrap .loading-spin[data-v-1e420db0]{--loading-w: 5;width:30px;aspect-ratio:1;border:calc(var(--loading-w) * 1px) solid #f3f3f3;border-radius:50%;border-top:calc(var(--loading-w) * 1px) solid #10ac84;border-bottom:calc(var(--loading-w) * 1px) solid tomato;-webkit-animation:animate-1e420db0 1s linear infinite;animation:animate-1e420db0 1s linear infinite;position:absolute;top:15px;left:20px}@-webkit-keyframes animate-1e420db0{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes animate-1e420db0{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.scroll-item-nav__wrapper[data-v-af91d055]{background-color:#0009;width:100%;overflow:hidden}.scroll-item-nav__wrapper .nav-header__wrap[data-v-af91d055]{height:50px;overflow:hidden;display:flex;flex-direction:column}.scroll-item-nav__wrapper .nav-header__wrap .image-index[data-v-af91d055]{outline:none;border:none;text-align:center;flex:1}.scroll-item-nav__wrapper .nav-header__wrap .query-btn[data-v-af91d055]{flex:1;background:#3a8df5;color:#eee;border:none;border-radius:4px}.scroll-item-nav__wrapper .nav-header__wrap .query-btn.is-disabled[data-v-af91d055]{cursor:not-allowed;opacity:.7}.scroll-item-nav__wrapper .nav-scroll__wrap[data-v-af91d055]{height:calc(var(--sider-height, 600) * 1px);background-color:#6b72800d;padding:.5rem .3rem;overflow-y:auto}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item[data-v-af91d055]{border:1px solid transparent;margin-bottom:.5rem;border-radius:4px;position:relative;opacity:.5}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item[data-v-af91d055]:hover{opacity:1}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item.active-item[data-v-af91d055]{opacity:1;border:1px solid var(--active-icon-color)}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .index[data-v-af91d055]{position:absolute;top:10px;left:20px;color:red}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .error-text[data-v-af91d055]{position:absolute;top:20px;left:15px;color:tomato;font-size:12px}.scroll-item-nav__wrapper .nav-scroll__wrap .list-group-item .list-group-image[data-v-af91d055]{width:100%;height:100%;object-fit:cover;border-radius:4px}.control-svg__btns[data-v-607600ac]{background-color:#00000080;border-radius:8px;padding:8px 10px!important}.control-svg__btns .tool-item-icon__btn[data-v-607600ac]{margin:0 8px;width:25px;height:25px}.control-svg__btns .tool-item-icon__btn path[data-v-607600ac]{fill:#eee}.icon-is-hover:hover path[data-v-607600ac]{fill:var(--active-icon-color)!important}.image-viewer-vue3__root[data-v-23409179]{position:fixed;top:0;right:0;bottom:0;left:0}.nav-scroll-style__wrap[data-v-23409179] ::-webkit-scrollbar{width:6px;height:6px;background:#f7f7f7}.nav-scroll-style__wrap[data-v-23409179] ::-webkit-scrollbar-track{border-radius:10px}.nav-scroll-style__wrap[data-v-23409179] ::-webkit-scrollbar-thumb{background-color:#4593fb5e}.images-viewer-vue3__wrapper[data-v-23409179] *{box-sizing:border-box;padding:0;margin:0}.images-viewer-vue3__wrapper[data-v-23409179]{--active-icon-color: #3A8DF5;--active-text-color: var(--text-color, #eee);--nav-width: 90px;background:#0009;position:fixed;left:0;top:0;bottom:0;width:100%;height:100%;max-height:100%;-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9999;overflow:hidden;opacity:0;transition:opacity 1s ease}.images-viewer-vue3__wrapper ul[data-v-23409179]{padding:0;list-style:none;margin:0}.images-viewer-vue3__wrapper .svg-icon__action[data-v-23409179]{width:25px;height:25px}.images-viewer-vue3__wrapper .svg-icon__action path[data-v-23409179]{fill:#eee}.images-viewer-vue3__wrapper.is-active[data-v-23409179]{opacity:1}.images-viewer-vue3__wrapper .is-hidden[data-v-23409179]{display:none!important}.images-viewer-vue3__wrapper .is-show[data-v-23409179]{display:block}.images-viewer-vue3__wrapper .cursor[data-v-23409179]{cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__mobile[data-v-23409179]{max-width:100%;max-height:100%;position:relative;display:grid;place-items:center;height:100vh}.images-viewer-vue3__wrapper .images-viewer-vue3__mobile .cus-head-info[data-v-23409179]{position:absolute;top:15px;left:40%;z-index:10;color:#eee}.images-viewer-vue3__wrapper .images-viewer-vue3__content[data-v-23409179]{position:absolute;top:0;bottom:0;left:0;right:0;display:grid;grid-template-columns:90px 1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content.active-grid[data-v-23409179]{grid-template-columns:0px 1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content.close-grid[data-v-23409179]{grid-template-columns:1fr}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper[data-v-23409179]{width:0px;overflow:hidden;transition:width .6s ease,opacity .5s ease;opacity:0;transform:skew(0)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper.nav-active[data-v-23409179]{width:var(--nav-width);opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .nav-vnode-scroll__wrapper[data-v-23409179]{width:100%;height:100%;overflow-y:auto;background-color:#0009}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group[data-v-23409179]{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-23409179]{width:80%;opacity:.5;border:1px solid transparent;position:relative;border-radius:6px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item.list-group-item__active[data-v-23409179]{opacity:1;border:2px solid var(--active-icon-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item[data-v-23409179]:hover{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item span[data-v-23409179]{position:absolute;left:20px;top:20px;color:red}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-nav__wrapper .vnode-list-group .list-group-item .list-group-item__image[data-v-23409179]{width:100%;object-fit:cover;height:100%;border-radius:6px;cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper[data-v-23409179]{flex:1;width:100%;height:100%;transform-origin:top left;display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:1000px;transform-style:preserve-3d;overflow:hidden;color:var(--active-text-color)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn[data-v-23409179]{transition:transform .3s ease}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-collapse-nav__btn.rotate-right__btn[data-v-23409179]{transform:scale(-1)}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-header__inner[data-v-23409179]{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;z-index:10;padding:8px 10px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-header__inner.flex-end[data-v-23409179]{justify-content:flex-end}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info[data-v-23409179]{display:flex;align-items:center}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info .info-icon__item[data-v-23409179]{margin:0 12px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info .info-icon__item[data-v-23409179]:first-child{position:relative}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info .info-icon__item:first-child .info-details[data-v-23409179]{position:absolute;left:-150px;opacity:0;transition:opacity .3s ease;min-width:230px;font-size:12px;padding:.8rem;border-radius:6px;background:#00000080}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info .info-icon__item:first-child .info-details li[data-v-23409179]{margin-bottom:5px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info .info-icon__item:first-child .info-details li .link-a[data-v-23409179]{max-width:190px;white-space:wrap;word-break:break-all;word-wrap:break-word;color:#3a8df5}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info .info-icon__item:first-child:hover .info-details[data-v-23409179]{opacity:1}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-info .images-viewer-vue3__close[data-v-23409179]{background:#0000004d;border-radius:50%;width:26px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;cursor:pointer}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__inner[data-v-23409179]{flex:0 1 auto;z-index:1;-webkit-user-select:none;user-select:none;width:auto;height:auto;object-fit:cover;padding:30px;display:inline-block}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls[data-v-23409179]{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;flex-direction:column;align-items:center;flex-wrap:wrap;padding:10px 0;z-index:10}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .control-info[data-v-23409179]{display:flex;align-items:center;color:#eee;padding-bottom:6px}.images-viewer-vue3__wrapper .images-viewer-vue3__content .content-viewer-image__wrapper .image-viewer__controls .position[data-v-23409179]{position:absolute;left:30px}.images-viewer-vue3__wrapper .icon-is-hover[data-v-23409179]:hover{cursor:pointer}.images-viewer-vue3__wrapper .icon-is-hover:hover path[data-v-23409179]{fill:var(--active-icon-color)!important}.images-viewer-vue3__wrapper .close-icon[data-v-23409179]{transition:fill .3s ease}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-23409179],.images-viewer-vue3__wrapper .viewer-next-icon[data-v-23409179]{position:fixed;background:#0000004d;border-radius:50%;width:44px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:10}.images-viewer-vue3__wrapper .viewer-previous-icon[data-v-23409179]{top:40%;left:0}.images-viewer-vue3__wrapper .viewer-next-icon[data-v-23409179]{top:40%;right:0}.cus-transition[data-v-23409179]{transform:scale(1);transition:transform .3s ease}.is-active-border-color[data-v-23409179]{border:1px solid var(--active-icon-color);opacity:1!important}#ivv-message-wrapper{position:fixed;top:32px;right:15px;z-index:999999}.message-item{display:flex;align-items:center;background-color:#fff;border-radius:2px;padding:0 15px;min-width:230px;max-width:450px;border-left:4px solid;box-shadow:0 5px 8px #00000014;transition:all linear .3s}@keyframes slideInLeft{0%{opacity:0;transform:translate(calc(100% + 15px))}to{opacity:1;transform:translate(0)}}@keyframes fadeOut{to{opacity:0}}.ivv-message-item--success{border-color:#47d864}.ivv-message-item--success .message__icon{color:#47d864}.ivv-message-item--info{border-color:#2f86eb}.ivv-message-item--warning{border-color:#ffc021}.ivv-message-item--error{border-color:#ff623d}.message-item+.message-item{margin-top:24px}.ivv-message-item__icon,.ivv-message-item__close{padding:0 16px}.ivv-message-item__body{flex-grow:1}.ivv-message-item__title{font-size:16px;font-weight:600;color:#333}.ivv-message-item__msg{font-size:14px;color:#888;margin-top:6px;line-height:1.5}.ivv-message-item__close{font-size:20px;color:#0000004d;cursor:pointer}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { createVNode as g, render as s } from "vue";
import d from "./components/viewer.vue.js";
import l from "./components/index.vue.js";
import u from "./directive/v-image-viewer.js";
import y from "./directive/v-lazy-image.js";
import f from "./utils/ViewerCore.js";
import { versions as v, asyncVerifyIllegalImage as p } from "./utils/index.js";
/* empty css */
let m;
const t = f.getInStance();
var a = (e, i) => {
};
function L(e, i) {
i && t.setConfigOptions(i), console.log(`%cimages-viewer-vue3_V${v}`, "color: #eee;background:#646cff;padding:2px 5px;border-radius:4px;"), e.directive("image-viewer", u), e.directive("lazy-image", y), e.component("ImagesViewerVue3", d), e.config.globalProperties.$imageViewerApi = w;
}
async function w(e) {
var i = [];
await p(e.images || []).then((n) => {
i = n.data;
}).catch((n) => {
console.error("images-viewer-vue3:", JSON.stringify(n));
});
const r = t.getConfigOptions();
var o = null;
o ? o && document.body.removeChild(o) : (m = g(l, {
visible: !0,
specifyIndex: e.specifyIndex,
current: e.current,
images: i,
zIndex: r.zIndex,
image: e.imageDom,
from: e.from || "api",
language: r.language || "zh",
playSpeed: r.playSpeed,
isDownLoad: r.isDownLoad,
handleChange: ({ image: n, index: c }) => {
a && a(n, c);
},
handleClose: () => {
I();
}
}), o = document.createElement("div"), o.style.zIndex = r.zIndex + "", o.classList.add("image-viewer-vue3__root"), s(m, o), document.body.style.overflow = "hidden", document.body.style.margin = "0px", document.body.style.padding = "0px", document.body.appendChild(o), a && a(e.current, e.imageDom && e.imageDom.getAttribute("data-index")));
}
function I() {
const e = document.querySelector(".image-viewer-vue3__root");
e && (document.body.style.removeProperty("overflow"), document.body.style.removeProperty("margin"), document.body.style.removeProperty("padding"), document.body.removeChild(e)), t.destroyed();
}
function S(e) {
e && (a = e);
}
const P = d;
export {
P as ImageViewerVue3,
u as VImageViewer,
L as default,
w as imageViewerApi,
I as onClose,
S as onUpdate
};