2 lines
4.2 KiB
JavaScript
2 lines
4.2 KiB
JavaScript
"use strict";var e=Object.defineProperty,t=Object.defineProperties,i=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,l=(t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r,a=(e,t)=>{for(var i in t||(t={}))s.call(t,i)&&l(e,i,t[i]);if(r)for(var i of r(t))n.call(t,i)&&l(e,i,t[i]);return e},c=(e,r)=>t(e,i(r));const h=require("../../../common/vendor.js"),d=require("../../helper/index.js"),o={name:"su-tabs",data:()=>({addStyle:d.addStyle,addUnit:d.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:[]},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 t={},i=e===this.innerCurrent?d.addStyle(this.activeStyle):d.addStyle(this.inactiveStyle);return this.list[e].disabled&&(t.color="#c8c9cc"),d.deepMerge(i,t)}}},mounted(){return e=this,t=null,i=function*(){this.init()},new Promise(((r,s)=>{var n=e=>{try{a(i.next(e))}catch(t){s(t)}},l=e=>{try{a(i.throw(e))}catch(t){s(t)}},a=e=>e.done?r(e.value):Promise.resolve(e.value).then(n,l);a((i=i.apply(e,t)).next())}));var e,t,i},methods:{$uGetRect(e,t){return new Promise((i=>{h.index.createSelectorQuery().in(this)[t?"selectAll":"select"](e).boundingClientRect((e=>{t&&Array.isArray(e)&&e.length&&i(e),!t&&e&&i(e)})).exec()}))},setLineLeft(){const e=this.list[this.innerCurrent];if(!e)return;const t=this.list.slice(0,this.innerCurrent).reduce(((e,t)=>e+t.rect.width),0),i=d.getPx(this.lineWidth);this.lineOffsetLeft=t+(e.rect.width-i)/2,this.firstTime&&setTimeout((()=>{this.firstTime=!1}),10)},animation(e,t=0){},clickHandler(e,t){this.$emit("click",c(a({},e),{index:t})),e.disabled||(this.innerCurrent=t,this.resize(),this.$emit("change",c(a({},e),{index:t})))},init(){d.sleep().then((()=>{this.resize()}))},setScrollLeft(){const e=this.list[this.innerCurrent],t=this.list.slice(0,this.innerCurrent).reduce(((e,t)=>e+t.rect.width),0),i=d.sys().windowWidth;let r=t-(this.tabsRect.width-e.rect.width)/2-(i-this.tabsRect.right)/2+this.tabsRect.left/2;r=Math.min(r,this.scrollViewWidth-this.tabsRect.width),this.scrollLeft=Math.max(0,r)},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)}))}))}}};const u=h._export_sfc(o,[["render",function(e,t,i,r,s,n){return{a:h.f(i.list,((e,t,r)=>({a:h.t(e[i.keyName]),b:h.n(e.disabled&&"u-tabs__wrapper__nav__item__text--disabled"),c:h.s(n.textStyle(t)),d:t,e:h.o((i=>n.clickHandler(e,t)),t),f:`u-tabs__wrapper__nav__item-${t}`,g:h.n(`u-tabs__wrapper__nav__item-${t}`),h:h.n(e.disabled&&"u-tabs__wrapper__nav__item--disabled")}))),b:h.s(s.addStyle(i.itemStyle)),c:h.s({flex:i.scrollable?"":1}),d:h.s({width:s.addUnit(i.lineWidth),transform:`translate(${s.lineOffsetLeft}px)`,transitionDuration:`${s.firstTime?0:i.duration}ms`,height:s.addUnit(i.lineHeight),background:i.lineColor?i.lineColor:"var(--ui-BG-Main)",backgroundSize:i.lineBgSize}),e:i.scrollable,f:s.scrollLeft}}],["__scopeId","data-v-d7ddec8a"]]);wx.createComponent(u);
|