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