zview-plus
Version:
基于 Vue3 的 UI 组件库
2 lines (1 loc) • 3.8 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("./carousel.js"),I=require("./utils.js"),f=require("../../icon/index.js"),S={class:"z-carousel-item"},_=["src"],T=["src"],q=["src"],P=["onMouseenter","onClick"],D={name:"ZCarousel"},L=e.defineComponent({...D,props:m.carouselProps,emits:m.carouselEmits,setup(p,{expose:z,emit:k}){const t=p,{root:v,transitionItem:h,activeIndex:a,arrowDisplay:s,hover:l,animating:w,handleIndicatorClick:C,handleMouseEnter:c,handleMouseLeave:u,setActiveItem:y,prev:g,next:B,throttledArrowClick:d,throttledIndicatorHover:E}=I.useCarousel(t,k),M=e.computed(()=>({[`z-carousel--${t.direction}`]:t.direction})),N=e.computed(()=>({[`z-carousel-indicators--${t.direction}`]:t.direction,["z-carousel-indicators-outside"]:t.indicatorPosition==="outside"})),V=e.computed(()=>({[`z-carousel-indicator-button--${t.indicatorType}`]:t.indicatorType})),$=e.computed(()=>t.direction==="horizontal"?{left:`${-100*(a.value+1)}%`}:{top:`${-100*(a.value+1)}%`});return z({setActiveItem:y,prev:g,next:B}),(r,o)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"root",ref:v,class:e.normalizeClass(["z-carousel",e.unref(M)]),onMouseenter:o[2]||(o[2]=e.withModifiers((...n)=>e.unref(c)&&e.unref(c)(...n),["stop"])),onMouseleave:o[3]||(o[3]=e.withModifiers((...n)=>e.unref(u)&&e.unref(u)(...n),["stop"]))},[e.createElementVNode("div",{class:"z-carousel-container",style:e.normalizeStyle({height:r.height})},[e.unref(s)?(e.openBlock(),e.createBlock(e.Transition,{key:0,name:"carousel-arrow-left"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("button",{type:"button",class:"z-carousel-arrow z-carousel-arrow-left",onClick:o[0]||(o[0]=e.withModifiers(n=>e.unref(d)(e.unref(a)-1),["stop"]))},[e.createVNode(e.unref(f.default),{name:"arrow-left2"})],512),[[e.vShow,(r.arrow==="always"||e.unref(l))&&(t.loop||e.unref(a)>0)]])]),_:1})):e.createCommentVNode("",!0),e.unref(s)?(e.openBlock(),e.createBlock(e.Transition,{key:1,name:"carousel-arrow-right"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("button",{type:"button",class:"z-carousel-arrow z-carousel-arrow-right",onClick:o[1]||(o[1]=e.withModifiers(n=>e.unref(d)(e.unref(a)+1),["stop"]))},[e.createVNode(e.unref(f.default),{name:"arrow-right2"})],512),[[e.vShow,(r.arrow==="always"||e.unref(l))&&(t.loop||e.unref(a)<r.data.length-1)]])]),_:1})):e.createCommentVNode("",!0),e.createElementVNode("div",S,[e.createElementVNode("div",{ref_key:"transitionItem",ref:h,class:e.normalizeClass(["z-carousel-item-container",{["z-carousel-item--animating"]:e.unref(w),["z-carousel-item-container-vertical"]:r.direction==="vertical"}]),style:e.normalizeStyle(e.unref($))},[e.createElementVNode("img",{class:"z-carousel-item-img",src:r.data[r.data.length-1]},null,8,_),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.data,(n,i)=>(e.openBlock(),e.createElementBlock("img",{class:"z-carousel-item-img",key:i,src:n},null,8,T))),128)),e.createElementVNode("img",{class:"z-carousel-item-img",src:r.data[0]},null,8,q)],6)])],4),r.indicatorPosition!=="none"?(e.openBlock(),e.createElementBlock("ul",{key:0,class:e.normalizeClass(["z-carousel-indicators",e.unref(N)])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.data,(n,i)=>(e.openBlock(),e.createElementBlock("li",{key:i,class:e.normalizeClass(["z-carousel-indicator",{"z-carousel-indicator-active":i===e.unref(a),[`z-carousel-indicator--${t.direction}`]:t.direction}]),onMouseenter:b=>e.unref(E)(i),onClick:e.withModifiers(b=>e.unref(C)(i),["stop"])},[e.createElementVNode("button",{class:e.normalizeClass(["z-carousel-indicator-button",e.unref(V)])},null,2)],42,P))),128))],2)):e.createCommentVNode("",!0)],34))}});exports.default=L;