| 1 |
- import{aq as t,aE as e,ax as i,k as s,p as r,m as n,w as o,q as a,a1 as l,E as h,B as u,F as c,C as d,t as f,v as b,z as g,bP as p,o as m,a2 as y}from"./index-C9TJPork.js";import{_ as x}from"./u-badge.BHkDpFBd.js";import{r as C}from"./uni-app.es.CUt9gedF.js";import{_ as S}from"./_plugin-vue_export-helper.BCo6x5W8.js";let I=p;const{windowWidth:w}=t();const W=S({name:"u-tabs-swiper",emits:["update:modelValue","input","change"],props:{isScroll:{type:Boolean,default:!0},list:{type:Array,default:()=>[]},current:{type:[Number,String],default:0},height:{type:[Number,String],default:80},fontSize:{type:[Number,String],default:30},swiperWidth:{type:[String,Number],default:750},activeColor:{type:String,default:"#2979ff"},inactiveColor:{type:String,default:"#303133"},barWidth:{type:[Number,String],default:40},barHeight:{type:[Number,String],default:6},gutter:{type:[Number,String],default:40},zIndex:{type:[Number,String],default:1},bgColor:{type:String,default:"#ffffff"},autoCenterMode:{type:String,default:"window"},name:{type:String,default:"name"},count:{type:String,default:"count"},offset:{type:Array,default:()=>[5,20]},bold:{type:Boolean,default:!0},activeItemStyle:{type:Object,default:()=>({})},showBar:{type:Boolean,default:!0},barStyle:{type:Object,default:()=>({})}},data(){return{scrollLeft:0,tabQueryInfo:[],windowWidth:0,animationFinishCurrent:this.current,componentsWidth:0,line3AddDx:0,line3Dx:0,preId:"UEl_",sW:0,tabsInfo:[],colorGradientArr:[],colorStep:100}},computed:{getCurrent(){const t=Number(this.current);return t>this.getTabs.length-1?this.getTabs.length-1:t<0?0:t},getTabs(){return this.list},scrollBarLeft(){return Number(this.line3Dx)+Number(this.line3AddDx)},barWidthPx(){return e(this.barWidth)},tabItemStyle(){return t=>{let e={height:this.height+"rpx",lineHeight:this.height+"rpx",padding:`0 ${this.gutter/2}rpx`,color:this.tabsInfo.length>0?this.tabsInfo[t]?this.tabsInfo[t].color:this.activeColor:this.inactiveColor,fontSize:this.fontSize+"rpx",zIndex:this.zIndex+2,fontWeight:t==this.getCurrent&&this.bold?"bold":"normal"};return t==this.getCurrent&&(e=Object.assign(e,this.activeItemStyle)),e}},tabBarStyle(){let t={width:this.barWidthPx+"px",height:this.barHeight+"rpx",borderRadius:"100px",backgroundColor:this.activeColor,left:this.scrollBarLeft+"px"};return Object.assign(t,this.barStyle)}},watch:{current(t,e){this.change(t),this.setFinishCurrent(t)},list(){this.$nextTick((()=>{this.init()}))}},mounted(){this.init()},methods:{async init(){this.countPx(),await this.getTabsInfo(),this.countLine3Dx(),this.getQuery((()=>{this.setScrollViewToCenter()})),this.colorGradientArr=I.colorGradient(this.inactiveColor,this.activeColor,this.colorStep)},getTabsInfo(){return new Promise(((t,e)=>{let s=i().in(this);for(let i=0;i<this.list.length;i++)s.select(".UEl_"+i).boundingClientRect();s.exec((e=>{const i=[];for(let t=0;t<e.length;t++)e[t].color=this.inactiveColor,t==this.getCurrent&&(e[t].color=this.activeColor),i.push(e[t]);this.tabsInfo=i,t()}))}))},countLine3Dx(){const t=this.tabsInfo[this.animationFinishCurrent];t&&(this.line3Dx=t.left+t.width/2-this.barWidthPx/2-this.tabsInfo[0].left)},countPx(){this.sW=e(Number(this.swiperWidth))},emit(t){this.$emit("change",t)},change(){this.setScrollViewToCenter()},getQuery(t){try{i().in(this).select(".u-tabs").fields({size:!0},(e=>{e?(this.componentsWidth=e.width,t&&"function"==typeof t&&t(e)):this.getQuery(t)})).exec()}catch(e){this.componentsWidth=w}},setScrollViewToCenter(){let t;if(t=this.tabsInfo[this.animationFinishCurrent],t){let e,i=t.left+t.width/2;e="window"===this.autoCenterMode?w:this.componentsWidth,this.scrollLeft=i-e/2}},setDx(t){let e=t>0?this.animationFinishCurrent+1:this.animationFinishCurrent-1;e=e<=0?0:e,e=e>=this.list.length?this.list.length-1:e,this.tabsInfo[e];let i=this.tabsInfo[this.animationFinishCurrent],s=i.left+i.width/2,r=this.tabsInfo[e],n=r.left+r.width/2,o=Math.abs(n-s);this.line3AddDx=t/this.sW*o,this.setTabColor(this.animationFinishCurrent,e,t)},setTabColor(t,e,i){let s=Math.abs(Math.ceil(i/this.sW*100)),r=this.colorGradientArr.length;s=s>=r?r-1:s<=0?0:s,this.tabsInfo[e].color=this.colorGradientArr[s],this.tabsInfo[t].color=this.colorGradientArr[r-1-s]},setFinishCurrent(t){this.tabsInfo.map(((e,i)=>(e.color=t==i?this.activeColor:this.inactiveColor,e))),this.line3AddDx=0,this.animationFinishCurrent=t,this.countLine3Dx()}}},[["render",function(t,e,i,p,S,I){const w=C(s("u-badge"),x),W=m,v=y;return r(),n(W,{class:"u-tabs",style:l({zIndex:i.zIndex,background:i.bgColor})},{default:o((()=>[a(v,{"scroll-x":"",class:"u-scroll-view","scroll-left":S.scrollLeft,"scroll-with-animation":"",style:l({zIndex:i.zIndex+1})},{default:o((()=>[a(W,{class:h(["u-tabs-scroll-box",{"u-tabs-scroll-flex":!i.isScroll}])},{default:o((()=>[(r(!0),u(c,null,d(I.getTabs,((t,e)=>(r(),n(W,{class:h(["u-tabs-item",[S.preId+e]]),style:l([I.tabItemStyle(e)]),key:e,onClick:t=>I.emit(e)},{default:o((()=>[a(w,{count:t[i.count]||t.count||0,offset:i.offset,size:"mini"},null,8,["count","offset"]),f(" "+b(t[i.name]||t.name),1)])),_:2},1032,["style","class","onClick"])))),128)),i.showBar?(r(),n(W,{key:0,class:"u-scroll-bar",style:l([I.tabBarStyle])},null,8,["style"])):g("",!0)])),_:1},8,["class"])])),_:1},8,["scroll-left","style"])])),_:1},8,["style"])}],["__scopeId","data-v-d47c6f70"]]);export{W as _};
|
