2 lines
5.7 KiB
JavaScript
Executable File
2 lines
5.7 KiB
JavaScript
Executable File
import{g as e,x as t,bf as a,K as l,y as o,E as s,o as u,c as n,w as i,e as r,m as c,n as d,f,bg as v,i as h,v as p,bh as b,r as g,a as m,b as y,l as _,F as x,G as w,j as S,d as F,t as X,H as k,bi as C,ax as Y,u as B,aW as T}from"./index-b1ac9181.js";import{_ as j}from"./_plugin-vue_export-helper.1b428a4d.js";import{_ as z}from"./u-badge.baaa1e60.js";import{_ as W}from"./u-sticky.5e88d534.js";const $=j(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("v-if",!0)])),_:3},8,["class","style"])}}}),[["__scopeId","data-v-a5e2333b"]]);const H=j(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 j=e,{touch:$,resetTouchStatus:H,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":"")}}}(),R=t([]),E=t([]),O=t(0),G=t([]),K=t(0),q=t(0),A=t(0),D=t("cu-tab"),J=t(j.current),L=t(!0),N=t(!1),P=v();s((()=>R.value),(async(e,t)=>{L.value||e.length===t.length||(J.value=0),await k(),Z()})),s((()=>j.current),((e,t)=>{k((()=>{J.value=e,te()}))}),{immediate:!0});const Q=o((()=>{const e={width:j.barWidth+"rpx",transform:`translate(${q.value}px, -100%)`,"transition-duration":`${L.value?0:j.duration}s`,"background-color":j.activeColor,height:j.barHeight+"rpx",opacity:L.value?0:1,"border-radius":j.barHeight/2+"px"};return Object.assign(e,j.barStyle),e})),U=o((()=>e=>{let t={height:j.height+"rpx","line-height":j.height+"rpx","font-size":j.fontSize+"rpx",padding:j.isScroll?`0 ${j.gutter}rpx`:"",flex:j.isScroll?"auto":"1",width:`${j.itemWidth}rpx`};return e==J.value&&j.bold&&(t.fontWeight="bold"),e==J.value?(t.color=j.activeColor,t=Object.assign(t,j.activeItemStyle)):t.color=j.inactiveColor,t})),V=()=>{R.value=E.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 C("#"+D.value,!1,P);A.value=e.left,K.value=e.width,ee()},ee=()=>{const e=Y().in(P);for(let t=0;t<R.value.length;t++)e.select(`#tab-item-${t}`).fields({size:!0,rect:!0});e.exec((e=>{G.value=e,te()}))},te=()=>{const e=G.value[J.value];if(!e)return;const t=e.width,a=e.left-A.value-(K.value-t)/2;O.value=a<0?0:a;const l=e.left+e.width/2-A.value;q.value=l-B(j.barWidth)/2,1==L.value&&setTimeout((()=>{L.value=!1}),100),E.value.forEach(((e,t)=>{const a=t===J.value;a===e.event.active&&e.event.inited||e.updateRender(a)}))},ae=e=>{j.swipeable&&(N.value=!0,I(e))},le=e=>{j.swipeable&&N.value&&M(e)},oe=()=>{if(!j.swipeable||!N.value)return;if("horizontal"===$.direction&&$.offsetX>=50){let e,t=R.value.length,l=J.value;e=$.deltaX<=0?l>=t-1?0:l+1:l<=0?t-1:l-1,k((()=>{J.value=e,te()})),a("change",e)}N.value=!1};return l((()=>{V()})),b("handleChange",((e,t)=>{E.value.push({event:e,updateRender:t})})),b("updateTabs",V),(t,l)=>{const o=g(m("u-badge"),z),s=h,v=T,p=g(m("u-sticky"),W);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:D.value,style:f({background:e.bgColor})},{default:i((()=>[y(v,{style:f({height:e.height+"rpx"}),"scroll-x":"",class:"scroll-view","scroll-left":O.value,"scroll-with-animation":""},{default:i((()=>[y(s,{class:d(["scroll-box",{"tabs-scorll-flex":!e.isScroll}])},{default:i((()=>[(u(!0),_(x,null,w(R.value,((t,l)=>(u(),n(s,{class:"tab-item line1",id:"tab-item-"+l,key:l,onClick:e=>(e=>{e!=J.value&&(k((()=>{J.value=e,te()})),a("change",e))})(l),style:f([S(U)(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(Q)])},null,8,["style"])):c("v-if",!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((()=>[c(' <view class="tab-track" :class="{\'tab-animated\': animated}" :style="[trackStyle]"> '),y(s,null,{default:i((()=>[r(t.$slots,"default",{},void 0,!0)])),_:3}),c(" </view> ")])),_:3})])),_:3})}}}),[["__scopeId","data-v-a021632e"]]);export{$ as _,H as a};
|