1 |
- import{aK as t,br as e,aM as s,aj as i,bs as a,aN as r,bt as l,a as n,b as _,e as c,d,w as u,f as h,al as o,x as p,F as f,y as b,L as m,n as w,g as y,j as g,l as v,i as S,K as x}from"./index-DNuNVpwk.js";import{_ as R}from"./uni-badge.CMavRt5I.js";import{_ as k}from"./_plugin-vue_export-helper.BCo6x5W8.js";const C=k({name:"su-tabs",data:()=>({addStyle:t,addUnit:e,firstTime:!0,scrollLeft:0,scrollViewWidth:0,lineOffsetLeft:0,tabsRect:{left:0},innerCurrent:0,moving:!1}),props:{duration:{type:Number,default:300},list:{type:Array,default:[]},badge:{type:Boolean,default:!1},lineColor:{type:String,default:""},activeStyle:{type:[String,Object],default:()=>({color:"#303133"})},inactiveStyle:{type:[String,Object],default:()=>({color:"#606266"})},lineWidth:{type:[String,Number],default:20},lineHeight:{type:[String,Number],default:3},lineBgSize:{type:String,default:"cover"},itemStyle:{type:[String,Object],default:()=>({height:"44px"})},scrollable:{type:Boolean,default:!0},current:{type:[Number,String],default:0},keyName:{type:String,default:"name"}},watch:{current:{immediate:!0,handler(t,e){t!==this.innerCurrent&&(this.innerCurrent=t,this.$nextTick((()=>{this.resize()})))}},list(){this.$nextTick((()=>{this.resize()}))}},computed:{textStyle(){return e=>{const i={},a=e===this.innerCurrent?t(this.activeStyle):t(this.inactiveStyle);return this.list[e].disabled&&(i.color="#c8c9cc"),s(a,i)}}},async mounted(){this.init()},methods:{$uGetRect(t,e){return new Promise((s=>{i().in(this)[e?"selectAll":"select"](t).boundingClientRect((t=>{e&&Array.isArray(t)&&t.length&&s(t),!e&&t&&s(t)})).exec()}))},setLineLeft(){const t=this.list[this.innerCurrent];if(!t)return;let e=this.list.slice(0,this.innerCurrent).reduce(((t,e)=>t+e.rect.width),0);const s=a(this.lineWidth);this.lineOffsetLeft=e+(t.rect.width-s)/2,this.firstTime&&setTimeout((()=>{this.firstTime=!1}),10)},animation(t,e=0){},clickHandler(t,e){this.$emit("click",{...t,index:e}),t.disabled||(this.innerCurrent=e,this.resize(),this.$emit("change",{...t,index:e}))},init(){r().then((()=>{this.resize()}))},setScrollLeft(){const t=this.list[this.innerCurrent],e=this.list.slice(0,this.innerCurrent).reduce(((t,e)=>t+e.rect.width),0),s=l().windowWidth;let i=e-(this.tabsRect.width-t.rect.width)/2-(s-this.tabsRect.right)/2+this.tabsRect.left/2;i=Math.min(i,this.scrollViewWidth-this.tabsRect.width),this.scrollLeft=Math.max(0,i)},resize(){0!==this.list.length&&Promise.all([this.getTabsRect(),this.getAllItemRect()]).then((([t,e=[]])=>{this.tabsRect=t,this.scrollViewWidth=0,e.map(((t,e)=>{this.scrollViewWidth+=t.width,this.list[e].rect=t})),this.setLineLeft(),this.setScrollLeft()}))},getTabsRect(){return new Promise((t=>{this.queryRect("u-tabs__wrapper__scroll-view").then((e=>t(e)))}))},getAllItemRect(){return new Promise((t=>{const e=this.list.map(((t,e)=>this.queryRect(`u-tabs__wrapper__nav__item-${e}`,!0)));Promise.all(e).then((e=>t(e)))}))},queryRect(t,e){return new Promise((e=>{this.$uGetRect(`.${t}`).then((t=>{e(t)}))}))}}},[["render",function(t,e,s,i,a,r){const l=v,k=n(_("uni-badge"),R),C=S,$=x;return c(),d(C,{class:"u-tabs"},{default:u((()=>[h(C,{class:"u-tabs__wrapper"},{default:u((()=>[o(t.$slots,"left",{},void 0,!0),h(C,{class:"u-tabs__wrapper__scroll-view-wrapper"},{default:u((()=>[h($,{"scroll-x":s.scrollable,"scroll-left":a.scrollLeft,"scroll-with-animation":"","enable-flex":"",class:"u-tabs__wrapper__scroll-view white-space","show-scrollbar":!1,ref:"u-tabs__wrapper__scroll-view"},{default:u((()=>[h(C,{class:"u-tabs__wrapper__nav",ref:"u-tabs__wrapper__nav"},{default:u((()=>[(c(!0),p(f,null,b(s.list,((t,e)=>(c(),d(C,{class:m(["u-tabs__wrapper__nav__item",[`u-tabs__wrapper__nav__item-${e}`,t.disabled&&"u-tabs__wrapper__nav__item--disabled"]]),key:e,onClick:s=>r.clickHandler(t,e),ref_for:!0,ref:`u-tabs__wrapper__nav__item-${e}`,style:w([a.addStyle(s.itemStyle),{flex:s.scrollable?"":1}])},{default:u((()=>[s.badge&&t.isShow?(c(),d(k,{key:0,class:"uni-badge-left-margin",text:t.num,absolute:"rightTop",size:"small"},{default:u((()=>[h(l,{class:m([[t.disabled&&"u-tabs__wrapper__nav__item__text--disabled"],"u-tabs__wrapper__nav__item__text"]),style:w([r.textStyle(e)])},{default:u((()=>[y(g(t[s.keyName]),1)])),_:2},1032,["class","style"])])),_:2},1032,["text"])):(c(),d(l,{key:1,class:m([[t.disabled&&"u-tabs__wrapper__nav__item__text--disabled"],"u-tabs__wrapper__nav__item__text"]),style:w([r.textStyle(e)])},{default:u((()=>[y(g(t[s.keyName]),1)])),_:2},1032,["class","style"]))])),_:2},1032,["onClick","style","class"])))),128)),h(C,{class:"u-tabs__wrapper__nav__line",ref:"u-tabs__wrapper__nav__line",style:w([{width:a.addUnit(s.lineWidth),transform:`translate(${a.lineOffsetLeft}px)`,transitionDuration:`${a.firstTime?0:s.duration}ms`,height:a.addUnit(s.lineHeight),background:s.lineColor?s.lineColor:"var(--ui-BG-Main)",backgroundSize:s.lineBgSize}])},null,8,["style"])])),_:1},512)])),_:1},8,["scroll-x","scroll-left"])])),_:1}),o(t.$slots,"right",{},void 0,!0)])),_:3})])),_:3})}],["__scopeId","data-v-09ba7dd5"]]);export{C as _};
|