images-viewer-vue3
Version:
A lightweight image viewer for Vue3
2 lines (1 loc) • 2.12 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("../utils/ViewerCore.js"),C=require("../utils/index.js"),n=require("vue"),F=require("../node_modules/.pnpm/@vueuse_core@11.2.0_vue@3.4.29_typescript@5.7.2_/node_modules/@vueuse/core/index.js"),H=(s,x)=>{const c=n.ref(null),t=n.ref(null),u=n.ref(""),i=n.ref(!0),o=B.default.getInStance(),r=n.ref(-1),y=n.ref(-1),g=n.ref(""),m=n.ref({naturalRatio:"",renderRatio:"",size:"",fixedAspectRatio:""}),h=n.ref(s.length>0);function p(e){o.horizontalInvert()}function w(e){o.verticalInvert()}function R(e){o.zoomIn()}function S(e){o.zoomOut()}function z(e){o.rotate("+")}function $(e){o.rotate("-")}const b=e=>{o.onWheel(e)},q=e=>{var l;const a=(l=t.value)==null?void 0:l.src;C.downloadExe(a)},T=()=>{c.value=null,t.value=null,u.value="",i.value=!0,r.value=-1,y.value=-1,o.destroyed()},W=()=>{o.removeStyleProperty()},V=e=>{o.setImage(t.value);const a=new Image;a.src=t.value&&t.value.src;const{width:l,height:v,naturalWidth:f,naturalHeight:d}=a;t.value&&c.value&&(t.value.style.transform="",t.value.style.removeProperty("position"),t.value.style.maxHeight="100%",t.value.style.maxWidth="100%"),u.value="",i.value=!1;const A=Number(f*d/1024).toFixed(2);m.value={naturalRatio:`${f} x ${d} px`,renderRatio:`${l} x ${v} px`,size:`${A} KB`,fixedAspectRatio:`${f}:${d}`}},k=e=>{i.value=!1,u.value="加载图片失败，请仔细检测图片访问路径！"},E=()=>{r.value!==s.length-1&&(r.value++,I())},O=()=>{r.value!==0&&(r.value--,I())},I=()=>{if(!t.value)return;const e=s[r.value];e&&(g.value=t.value.src=e,x({image:t.value.src,index:r.value}))},P=()=>{const e=document.querySelector(".image-viewer-vue3__root"),{enter:a,exit:l,toggle:v}=F.useFullscreen(e);v()};return n.nextTick(()=>{}),{updateImageSrc:g,isMultipleImage:h,onWheelListener:b,imageInfo:m,nextImage:E,previousImage:O,destroyedExe:T,resetStyle:W,downloads:q,loadImageErrorText:u,loading:i,errorImage:k,loadImage:V,imageRef:t,imageVieverWidgetRef:c,inevrtY:p,inevrtX:w,zoomIn:R,zoomOut:S,clockwise:z,counterclockwise:$,currentIndex:r,fullScreen:P}};exports.useToolbar=H;