images-viewer-vue3
Version:
A lightweight image viewer for Vue3
2 lines (1 loc) • 3.19 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),b=require("../node_modules/.pnpm/@vueuse_core@11.2.0_vue@3.4.29_typescript@5.7.2_/node_modules/@vueuse/core/index.js"),B=require("../directive/v-lazy-image.js"),C=require("./NavLoading.vue.js"),I={class:"nav-header__wrap"},z=["max"],M=["disabled"],P={key:1,class:"error-text"},q=["data-id","onLoad","onError","onClick"],T=e.defineComponent({__name:"ScrollItemNav",props:e.mergeModels({maxValue:{type:Number,default:1e4,required:!0}},{modelValue:{required:!0,default:()=>1},modelModifiers:{}}),emits:e.mergeModels(["on-click","on-input"],["update:modelValue"]),setup(u,{expose:g,emit:h}){const d=e.inject("images"),m=h,p=e.useModel(u,"modelValue"),s=e.ref(null),k=e.ref(""),l=e.ref(1),_=d.map((t,r)=>({height:(r%2===0,60),size:r%2===0?"small":"large",url:t,index:r,isLoad:!0,isError:!1})),v=e.computed(()=>_.filter(t=>t.size.startsWith(k.value.toLowerCase()))),i=e.computed(()=>l.value>d.length),y=(t,r)=>{t.isLoad=!1,t.isError=!1},E=(t,r)=>{t.isLoad=!1,t.isError=!0},x=(t,r,n)=>{m("on-click",{evt:t,item:r,index:n})},{list:w,containerProps:V,wrapperProps:L,scrollTo:f}=b.useVirtualList(v,{itemHeight:t=>v.value[t].height+8,overscan:10}),N=t=>{const r=t||window.event;["Enter","NumpadEnter"].includes(r.code)&&!i.value&&a()};function a(){let t=+l.value;if(t>=1){const r=t-1;f(r),m("on-input",r),p.value=r}}return e.nextTick().then(t=>{if(s.value){const r=s.value;let n=window;r.style.setProperty("--sider-height",`${n.innerHeight-50}`),window.addEventListener("resize",o=>{n=o.target,r.style.setProperty("--sider-height",`${n.innerHeight-50}`)})}}),g({scrollTo:f,scrollToImage:a}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"scroll-item-nav__wrapper",ref_key:"scrollRef",ref:s},[e.createElementVNode("div",I,[e.withDirectives(e.createElementVNode("input",{class:"image-index",min:1,max:u.maxValue,"onUpdate:modelValue":r[0]||(r[0]=n=>l.value=n),placeholder:"请输入张数",type:"number",onKeydown:N},null,40,z),[[e.vModelText,l.value]]),e.createElementVNode("button",{class:e.normalizeClass(["query-btn",{"is-disabled":i.value}]),type:"button",onClick:a,disabled:i.value},"GO",10,M)]),e.createElementVNode("div",e.mergeProps({class:"nav-scroll__wrap"},e.unref(V)),[e.createElementVNode("div",e.normalizeProps(e.guardReactiveProps(e.unref(L))),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(w),({index:n,data:o})=>(e.openBlock(),e.createElementBlock("div",{key:n,class:e.normalizeClass(["list-group-item",{"active-item":p.value===o.index}]),style:e.normalizeStyle({height:`${o.height}px`,display:"flex",justifyContent:"center",alignItems:"center"})},[o.isLoad?(e.openBlock(),e.createBlock(C.default,{key:0})):e.createCommentVNode("",!0),o.isError?(e.openBlock(),e.createElementBlock("span",P,"加载失败")):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("img",{class:"list-group-image","data-id":o.index,alt:"picture",onLoad:c=>y(o),onError:c=>E(o),onClick:e.withModifiers(c=>x(c,o,n),["stop","prevent"])},null,40,q),[[e.unref(B.default),o.url]])],6))),128))],16)],16)],512))}});exports.default=T;