st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
2 lines (1 loc) • 4.67 kB
JavaScript
;const e=require("vue"),z=require("../StSwiper/StSwiper.vue.js");;/* empty css */const D=require("../StSwiperSlide/StSwiperSlide.vue.js"),f=require("../../node_modules/.pnpm/@vueuse_core@12.0.0_typescript@5.6.2/node_modules/@vueuse/core/index.js"),V={class:"st-timeline1__display"},C={class:"st-timeline1__timeline"},R={class:"st-timeline1__timeline-swipe__slide__content__label"},T=e.defineComponent({name:"StTimeline1",__name:"StTimeline1",props:{initialIndex:{default:0},enableMousewheelSwitch:{type:Boolean,default:!0},speed:{default:1500},transitionFun:{default:"cubic-bezier(.68, -0.55, .26, 1.55)"},transitionDelay:{default:0},background:{default:"transparent"},timelineData:{},timelinePerView:{default:1},timelinePerViewReactScreen:{default:1},timelineOffset:{default:void 0},timelineColor:{default:"#9c9c9c9f"},timelineColorActive:{default:"#efefef"},timelineTextMaxLine:{default:1},timelineSpeed:{default:1200},timelineTransitionFun:{default:"cubic-bezier(.68, -0.55, .26, 1.55)"},timelineTransitionDelay:{default:300},enableTimelineNav:{type:Boolean,default:!0},needReactScreenWidth:{default:600}},setup(k){const a=k,m=e.ref("vertical"),s=e.ref(),p=e.ref(),r=e.ref(),w=e.ref();e.onMounted(()=>{p.value=s.value.swiper,w.value=r.value.swiper});const d=e.ref(a.timelineOffset),v=i=>{if(d.value===void 0){const n=(t.value?f.useWindowSize().width.value:f.useWindowSize().height.value)/i;d.value=n*(i/2-.5)}};e.onBeforeMount(()=>{v(a.timelinePerView)});const u=e.ref(a.initialIndex),t=e.ref(!1),S=i=>{var n,c,o,h,_,y,g,b;const l=i<=a.needReactScreenWidth;l&&!t.value?(t.value=!0,(n=s.value.swiper)==null||n.changeDirection("horizontal"),(c=r.value.swiper)==null||c.changeDirection("horizontal"),v(a.timelinePerViewReactScreen),(o=s.value.swiper)==null||o.update(),(h=r.value.swiper)==null||h.update()):!l&&t.value&&(t.value=!1,(_=s.value.swiper)==null||_.changeDirection("vertical"),(y=r.value.swiper)==null||y.changeDirection("vertical"),v(a.timelinePerView),(g=s.value.swiper)==null||g.update(),(b=r.value.swiper)==null||b.update())};return e.onMounted(()=>{S(f.useWindowSize().width.value)}),e.watch(()=>f.useWindowSize().width.value,i=>{S(i)}),e.provide("isReact",t),(i,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["st-timeline1",[t.value?"st-timeline1--small-screen":""]]),style:e.normalizeStyle({background:i.background})},[e.createElementVNode("div",V,[e.createVNode(e.unref(z),{ref_key:"displaySwiperRef",ref:s,"active-slide-idx":u.value,"onUpdate:activeSlideIdx":l[0]||(l[0]=n=>u.value=n),"initial-slide":i.initialIndex,direction:m.value,mousewheel:i.enableMousewheelSwitch,"control-swiper":w.value,"transition-fun":i.transitionFun,"transition-speed":i.speed,"transition-delay":i.transitionDelay},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default",{},void 0,!0)]),_:3},8,["active-slide-idx","initial-slide","direction","mousewheel","control-swiper","transition-fun","transition-speed","transition-delay"])]),e.createElementVNode("div",C,[e.createVNode(e.unref(z),{ref_key:"timelineSwiperRef",ref:r,class:"st-timeline1__timeline-swiper",width:t.value?"100vw":"100%",height:t.value?"100%":"100vh","active-slide-idx":u.value,"onUpdate:activeSlideIdx":l[1]||(l[1]=n=>u.value=n),"initial-slide":i.initialIndex,direction:m.value,"slides-per-view":i.timelinePerView,"slides-offset-before":d.value,"slides-offset-after":d.value,mousewheel:i.enableMousewheelSwitch,navigation:i.enableTimelineNav,"nav-direction":"vertical","nav-align":t.value?"end":"start","control-swiper":p.value,"swiper-overflow":"initial","transition-fun":i.timelineTransitionFun,"transition-speed":i.timelineSpeed,"transition-delay":i.timelineTransitionDelay},{default:e.withCtx(({activeSlideIdx:n})=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.timelineData,(c,o)=>(e.openBlock(),e.createBlock(e.unref(D),{key:o,class:e.normalizeClass(["st-timeline1__timeline-swipe__slide",[n===o?"st-timeline1__timeline-swipe__slide--active":""]]),style:e.normalizeStyle({"--timeline-color":i.timelineColor,"--timeline-color-active":i.timelineColorActive})},{default:e.withCtx(()=>[e.createElementVNode("div",{class:"st-timeline1__timeline-swipe__slide__content",style:e.normalizeStyle({"--timeline-text-max-line":i.timelineTextMaxLine})},[e.createElementVNode("div",R,e.toDisplayString(c),1)],4)]),_:2},1032,["class","style"]))),128))]),_:1},8,["width","height","active-slide-idx","initial-slide","direction","slides-per-view","slides-offset-before","slides-offset-after","mousewheel","navigation","nav-align","control-swiper","transition-fun","transition-speed","transition-delay"])])],6))}});module.exports=T;