su-tabs.js 3.9 KB

1
  1. "use strict";const e=require("../../../common/vendor.js"),t=require("../../helper/index.js");require("../../helper/test.js"),require("../../helper/digit.js");const i={name:"su-tabs",data:()=>({addStyle:t.addStyle,addUnit:t.addUnit,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(e,t){e!==this.innerCurrent&&(this.innerCurrent=e,this.$nextTick((()=>{this.resize()})))}},list(){this.$nextTick((()=>{this.resize()}))}},computed:{textStyle(){return e=>{const i={},r=e===this.innerCurrent?t.addStyle(this.activeStyle):t.addStyle(this.inactiveStyle);return this.list[e].disabled&&(i.color="#c8c9cc"),t.deepMerge(r,i)}}},async mounted(){this.init()},methods:{$uGetRect(t,i){return new Promise((r=>{e.index.createSelectorQuery().in(this)[i?"selectAll":"select"](t).boundingClientRect((e=>{i&&Array.isArray(e)&&e.length&&r(e),!i&&e&&r(e)})).exec()}))},setLineLeft(){const e=this.list[this.innerCurrent];if(!e)return;let i=this.list.slice(0,this.innerCurrent).reduce(((e,t)=>e+t.rect.width),0);const r=t.getPx(this.lineWidth);this.lineOffsetLeft=i+(e.rect.width-r)/2,this.firstTime&&setTimeout((()=>{this.firstTime=!1}),10)},animation(e,t=0){},clickHandler(e,t){this.$emit("click",{...e,index:t}),e.disabled||(this.innerCurrent=t,this.resize(),this.$emit("change",{...e,index:t}))},init(){t.sleep().then((()=>{this.resize()}))},setScrollLeft(){const e=this.list[this.innerCurrent],i=this.list.slice(0,this.innerCurrent).reduce(((e,t)=>e+t.rect.width),0),r=t.sys().windowWidth;let s=i-(this.tabsRect.width-e.rect.width)/2-(r-this.tabsRect.right)/2+this.tabsRect.left/2;s=Math.min(s,this.scrollViewWidth-this.tabsRect.width),this.scrollLeft=Math.max(0,s)},resize(){0!==this.list.length&&Promise.all([this.getTabsRect(),this.getAllItemRect()]).then((([e,t=[]])=>{this.tabsRect=e,this.scrollViewWidth=0,t.map(((e,t)=>{this.scrollViewWidth+=e.width,this.list[t].rect=e})),this.setLineLeft(),this.setScrollLeft()}))},getTabsRect(){return new Promise((e=>{this.queryRect("u-tabs__wrapper__scroll-view").then((t=>e(t)))}))},getAllItemRect(){return new Promise((e=>{const t=this.list.map(((e,t)=>this.queryRect(`u-tabs__wrapper__nav__item-${t}`,!0)));Promise.all(t).then((t=>e(t)))}))},queryRect(e,t){return new Promise((t=>{this.$uGetRect(`.${e}`).then((e=>{t(e)}))}))}}};if(!Array){e.resolveComponent("uni-badge")()}Math;const r=e._export_sfc(i,[["render",function(t,i,r,s,n,l){return{a:e.f(r.list,((t,i,s)=>e.e({a:r.badge&&t.isShow},r.badge&&t.isShow?{b:e.t(t[r.keyName]),c:e.n(t.disabled&&"u-tabs__wrapper__nav__item__text--disabled"),d:e.s(l.textStyle(i)),e:"fedcb9ba-0-"+s,f:e.p({text:t.num,absolute:"rightTop",size:"small"})}:{g:e.t(t[r.keyName]),h:e.n(t.disabled&&"u-tabs__wrapper__nav__item__text--disabled"),i:e.s(l.textStyle(i))},{j:i,k:e.o((e=>l.clickHandler(t,i)),i),l:`u-tabs__wrapper__nav__item-${i}`,m:e.n(`u-tabs__wrapper__nav__item-${i}`),n:e.n(t.disabled&&"u-tabs__wrapper__nav__item--disabled")}))),b:e.s(n.addStyle(r.itemStyle)),c:e.s({flex:r.scrollable?"":1}),d:e.s({width:n.addUnit(r.lineWidth),transform:`translate(${n.lineOffsetLeft}px)`,transitionDuration:`${n.firstTime?0:r.duration}ms`,height:n.addUnit(r.lineHeight),background:r.lineColor?r.lineColor:"var(--ui-BG-Main)",backgroundSize:r.lineBgSize}),e:r.scrollable,f:n.scrollLeft}}],["__scopeId","data-v-fedcb9ba"]]);wx.createComponent(r);