2 lines
4.8 KiB
JavaScript
2 lines
4.8 KiB
JavaScript
import{E as e,d as t,l as a,m as l,c as o,az as s,o as u,e as i,w as n,f as r,n as c,R as d,q as f,v as h,F as v,h as b,i as p,T as g,a_ as m,bv as y,aq as x,H as _,bw as w,r as F,b as S,j as X,Q as C,g as Y,t as k,bx as B}from"./index-d0750414.js";import{_ as T}from"./u-badge.260dc84b.js";import{_ as z}from"./u-sticky.43ed0a1a.js";import{_ as j}from"./_plugin-vue_export-helper.1b428a4d.js";const W=j(t({__name:"tabs",props:{isScroll:{type:Boolean,default:!0},current:{default:0},height:{default:80},fontSize:{default:28},duration:{default:.3},activeColor:{default:"var(--color-primary)"},inactiveColor:{default:"#333"},barWidth:{default:40},barHeight:{default:4},gutter:{default:30},bgColor:{default:"#FFFFFF"},name:{default:"name"},count:{default:"count"},offset:{default:[5,20]},bold:{type:Boolean,default:!0},activeItemStyle:{default:{}},showBar:{type:Boolean,default:!0},barStyle:{default:{}},itemWidth:{default:"auto"},isFixed:{type:Boolean,default:!1},top:{default:0},stickyBgColor:{default:"#FFFFFF"},swipeable:{type:Boolean,default:!0}},emits:["change"],setup(t,{emit:j}){const W=t,{touch:$,resetTouchStatus:R,touchStart:H,touchMove:M}=function(){const t=e({direction:"",deltaX:0,deltaY:0,offsetX:0,offsetY:0}),a=()=>{t.direction="",t.deltaX=0,t.deltaY=0,t.offsetX=0,t.offsetY=0};return{touch:t,resetTouchStatus:a,touchStart:e=>{a();const l=e.touches[0];t.startX=l.clientX,t.startY=l.clientY},touchMove:e=>{const a=e.touches[0];var l,o;t.deltaX=a.clientX-t.startX,t.deltaY=a.clientY-t.startY,t.offsetX=Math.abs(t.deltaX),t.offsetY=Math.abs(t.deltaY),t.direction=t.direction||((l=t.offsetX)>(o=t.offsetY)&&l>10?"horizontal":o>l&&o>10?"vertical":"")}}}(),I=a([]),q=a([]),E=a(0),O=a([]),Q=a(0),Z=a(0),A=a(0),D=a("cu-tab"),G=a(W.current),J=a(!0),K=a(!1),L=B();l(()=>I.value,async(e,t)=>{J.value||e.length===t.length||(G.value=0),await m(),V()}),l(()=>W.current,(e,t)=>{m(()=>{G.value=e,te()})},{immediate:!0});const N=o(()=>{const e={width:W.barWidth+"rpx",transform:`translate(${Z.value}px, -100%)`,"transition-duration":`${J.value?0:W.duration}s`,"background-color":W.activeColor,height:W.barHeight+"rpx",opacity:J.value?0:1,"border-radius":W.barHeight/2+"px"};return Object.assign(e,W.barStyle),e}),P=o(()=>e=>{let t={height:W.height+"rpx","line-height":W.height+"rpx","font-size":W.fontSize+"rpx",padding:W.isScroll?`0 ${W.gutter}rpx`:"",flex:W.isScroll?"auto":"1",width:`${W.itemWidth}rpx`};return e==G.value&&W.bold&&(t.fontWeight="bold"),e==G.value?(t.color=W.activeColor,t=Object.assign(t,W.activeItemStyle)):t.color=W.inactiveColor,t}),U=()=>{I.value=q.value.map(e=>{const{name:t,dot:a,active:l,inited:o}=e.event,{updateRender:s}=e;return{name:t,dot:a,active:l,inited:o,updateRender:s}})},V=async()=>{const e=await y("#"+D.value,!1,L);A.value=e.left,Q.value=e.width,ee()},ee=()=>{const e=x().in(L);for(let t=0;t<I.value.length;t++)e.select(`#tab-item-${t}`).fields({size:!0,rect:!0});e.exec(e=>{O.value=e,te()})},te=()=>{const e=O.value[G.value];if(!e)return;const t=e.width,a=e.left-A.value-(Q.value-t)/2;E.value=a<0?0:a;const l=e.left+e.width/2-A.value;Z.value=l-_(W.barWidth)/2,1==J.value&&setTimeout(()=>{J.value=!1},100),q.value.forEach((e,t)=>{const a=t===G.value;a===e.event.active&&e.event.inited||e.updateRender(a)})},ae=e=>{W.swipeable&&(K.value=!0,H(e))},le=e=>{W.swipeable&&K.value&&M(e)},oe=()=>{if(!W.swipeable||!K.value)return;if("horizontal"===$.direction&&$.offsetX>=50){let e,t=I.value.length,a=G.value;e=$.deltaX<=0?a>=t-1?0:a+1:a<=0?t-1:a-1,m(()=>{G.value=e,te()}),j("change",e)}K.value=!1};return s(()=>{U()}),w("handleChange",(e,t)=>{q.value.push({event:e,updateRender:t})}),w("updateTabs",U),(e,a)=>{const l=F(S("u-badge"),T),o=X,s=C,y=F(S("u-sticky"),z);return u(),i(o,{class:"tabs"},{default:n(()=>[r(y,{enable:t.isFixed,"bg-color":t.stickyBgColor,"offset-top":t.top,"h5-nav-height":0},{default:n(()=>[r(o,{id:D.value,style:c({background:t.bgColor})},{default:n(()=>[r(s,{style:c({height:t.height+"rpx"}),"scroll-x":"",class:"scroll-view","scroll-left":E.value,"scroll-with-animation":""},{default:n(()=>[r(o,{class:d(["scroll-box",{"tabs-scorll-flex":!t.isScroll}])},{default:n(()=>[(u(!0),f(v,null,h(I.value,(e,a)=>(u(),i(o,{class:"tab-item line1",id:"tab-item-"+a,key:a,onClick:e=>(e=>{e!=G.value&&(m(()=>{G.value=e,te()}),j("change",e))})(a),style:c([b(P)(a)])},{default:n(()=>[r(l,{count:e[t.count]||e.dot||0,offset:t.offset,size:"mini"},null,8,["count","offset"]),Y(" "+k(e[t.name]||e.name),1)]),_:2},1032,["id","onClick","style"]))),128)),t.showBar?(u(),i(o,{key:0,class:"tab-bar",style:c([b(N)])},null,8,["style"])):p("",!0)]),_:1},8,["class"])]),_:1},8,["style","scroll-left"])]),_:1},8,["id","style"])]),_:1},8,["enable","bg-color","offset-top"]),r(o,{class:"tab-content",onTouchstart:ae,onTouchmove:le,onTouchcancel:oe,onTouchend:oe},{default:n(()=>[r(o,null,{default:n(()=>[g(e.$slots,"default",{},void 0,!0)]),_:3})]),_:3})]),_:3})}}}),[["__scopeId","data-v-a021632e"]]);export{W as t};
|