images-viewer-vue3
Version:
A lightweight image viewer for Vue3
2 lines (1 loc) • 1.11 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),g=require("../index.js"),v={ref:"viewerWrapRef",class:"viewer-root"},_=r.defineComponent({__name:"viewer",emits:["on-click"],setup(b,{emit:m}){const l=m,n=r.ref([]),f=()=>{const e=r.getCurrentInstance();if(e&&(e!=null&&e.proxy)){const c=e==null?void 0:e.proxy.$el;r.nextTick().then(k=>{Array.from(c.children).forEach((t,o)=>{t.setAttribute("data-index",`${o}`),t.src&&n.value.push({key:`${o}`,index:o,url:t.src});const i=new MutationObserver(()=>{t.src&&(n.value.push({key:`${o}`,index:o,url:t.src}),i.disconnect())});i.observe(t,{attributes:!0,attributeFilter:["src"]}),t.onclick=function(u){const{src:a}=u.target,p=n.value.sort((s,d)=>Number(s.key)-Number(d.key));g.imageViewerApi({specifyIndex:o,current:a,imageDom:t,from:"component",images:p.map(s=>s.url).filter(s=>s)}),l("on-click",{evt:u,image:a})}})})}};return r.onMounted(()=>{f()}),(e,c)=>(r.openBlock(),r.createElementBlock("div",v,[r.renderSlot(e.$slots,"default",{ref:"slotContent"})],512))}});exports.default=_;