zview-plus
Version:
基于 Vue3 的 UI 组件库
2 lines (1 loc) • 1.96 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),_=require("./time-axis.js"),h=require("../../../utils/vue/offset.js"),p=require("../../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/throttle.js"),v={key:0,class:"header"},g={class:"timeline"},k=["data-text"],E={class:"content"},x=["src"],w={class:"content-title"},y={class:"content-desc"},B={key:1,class:"footer"},S={name:"ZTimeAxis"},z=e.defineComponent({...S,props:_.TimeAxisProps,setup(d){const m=d,r=e.ref(null),n=e.ref(0),u=e.computed(()=>({backgroundImage:`url(${m.timeAxisItems[n.value].src})`}));let l;const c=p.default(()=>{let t=window.pageYOffset;const a=l.length;let o=0;const i=window.innerHeight;for(let s=0;s<a;s++){const f=l[s];if(h.offsetTop(f)<=t+i/3)o=s;else break}n.value=o},20);return e.onMounted(()=>{l=r.value.querySelectorAll(".z-timeaxis-item"),window.addEventListener("scroll",c)}),e.onUnmounted(()=>{window.removeEventListener("scroll",c)}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["z-timeaxis",t.single?"z-timeaxis-single":""]),ref_key:"timeaxis",ref:r,style:e.normalizeStyle(e.unref(u))},[t.$slots.header?(e.openBlock(),e.createElementBlock("div",v,[e.renderSlot(t.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.timeAxisItems,(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["z-timeaxis-item",n.value===i?"item--active":""]),"data-text":o.title},[e.createElementVNode("div",E,[e.createElementVNode("img",{class:"img",src:o.src},null,8,x),e.createElementVNode("h2",w,e.toDisplayString(o.time),1),e.createElementVNode("p",y,e.toDisplayString(o.content),1)])],10,k))),256))]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",B,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0)],6))}});exports.default=z;