2 lines
3.3 KiB
JavaScript
2 lines
3.3 KiB
JavaScript
import{D as t,o as e,c as i,w as r,b as l,E as s,a,q as n,F as o,N as c,i as h,S as d,e as u,y as f}from"./index-CH9-aFWw.js";import{_ as b}from"./_plugin-vue_export-helper.BCo6x5W8.js";const g=b({props:{list:{type:Array,default:()=>[]},current:{type:[Number,String],default:0},titalName:{type:String,default:"name"},barWidth:{type:[String,Number],default:16},barHeight:{type:[String,Number],default:2},barStyle:{type:Object,default:()=>({})},activeBarColor:{type:String,default:"#4990F9"},activeColor:{type:String,default:"#4990F9"},duration:{type:[String,Number],default:.5},height:{type:Number,default:34},fontSize:{type:String,default:"16px"},scroll:{type:Boolean,default:!0},marright:{type:String,default:"38px"},activeWeight:{type:String,default:"normal"},background:{type:String,default:""}},watch:{list(t,e){t.length!==e.length&&(this.currentIndex=0),this.$nextTick((()=>{this.init()}))},current:{immediate:!0,handler(t,e){this.$nextTick((()=>{this.currentIndex=t,this.scrollByIndex()}))}}},computed:{tabBarStyle:function(){let t={width:this.barWidth+"px",height:this.barHeight+"px",transform:`translateX(${this.scrollBarLeft}px)`,"transition-duration":`${this.barFirstTimeMove?0:this.duration}s`,"border-radius":this.barHeight/2+"px","background-color":this.activeBarColor};return Object.assign(t,this.barStyle),t},tabHeight(){return this.height+"px"}},data:()=>({scrollLeft:0,componentWidth:0,parentLeft:0,scrollBarLeft:0,tabItemRectInfo:[],currentIndex:0,barFirstTimeMove:!0}),mounted(){this.init()},methods:{init(){this.$nextTick((()=>{t().in(this).select("#tab").fields({size:!0,rect:!0},(t=>{this.parentLeft=t.left,this.componentWidth=t.width})).exec(),this.getTabItemRect()}))},getTabItemRect(){let e=t().in(this);for(let t=0;t<this.list.length;t++)e.select(`#tab-item-${t}`).fields({size:!0,rect:!0});e.exec((t=>{this.tabItemRectInfo=t,this.scrollByIndex()}))},scrollByIndex(){let t=this.tabItemRectInfo[this.currentIndex];if(!t)return;let e=t.width,i=t.left-this.parentLeft-(this.componentWidth-e)/2;this.scrollLeft=i<0?0:i;let r=t.left+t.width/2-this.parentLeft;this.scrollBarLeft=r-this.barWidth/2,1==this.barFirstTimeMove&&setTimeout((()=>{this.barFirstTimeMove=!1}),100)},clickTab(t,e){e!=this.currentIndex&&(this.currentIndex=e,this.$emit("tabItemClick",t,e),this.scrollByIndex())}}},[["render",function(t,b,g,m,p,y){const x=h,I=d;return e(),i(x,{class:"tab",style:c({background:g.background})},{default:r((()=>[l(I,{class:"scroll-view-content","scroll-x":"","scroll-with-animation":"","show-scrollbar":!1,"scroll-left":p.scrollLeft},{default:r((()=>[l(x,{class:s(["scroll-item-view",g.scroll?"":"flex-row-left"]),id:"tab"},{default:r((()=>[(e(!0),a(o,null,n(g.list,((t,l)=>(e(),i(x,{class:s(["scroll-item",[l==g.list.length-1?"no-right":""]]),style:c({color:p.currentIndex==l?g.activeColor:"",height:y.tabHeight,"line-height":y.tabHeight,"font-size":g.fontSize,width:g.scroll?"":100/g.list.length+"%","margin-right":g.scroll?g.marright:"","font-weight":p.currentIndex==l?g.activeWeight:""}),id:"tab-item-"+l,key:l,onClick:e=>y.clickTab(t,l)},{default:r((()=>[u(f(t[g.titalName]),1)])),_:2},1032,["class","style","id","onClick"])))),128)),l(x,{class:"scroll-tab-bar",style:c([y.tabBarStyle])},null,8,["style"])])),_:1},8,["class"])])),_:1},8,["scroll-left"])])),_:1},8,["style"])}],["__scopeId","data-v-331c23d4"]]);export{g as J};
|