uv-ui/lib/components/tab/tab.cjs

基于vue3的移动端组件库

"use strict";const e=require("vue"),b=require("../../utils/common.cjs");require("./tab.vue_vue_type_style_index_0_lang.cjs");const h={class:"uv-tab-wrap"},g=["onClick"],k={name:"UvTab"},C=Object.assign(k,{props:{acitveIndex:{type:Number,default:0},bgColor:{type:String},color:{type:String},activeColor:{type:String},scroll:{type:Boolean,default:!1},lineHeight:{type:String},lineColor:{type:String},list:{type:Array},shrink:{type:Boolean,default:!1},placeholder:{type:String,default:""}},emits:["change"],setup(t,{emit:d}){const u=t,r=e.ref(null),i=e.ref(null),s=e.ref(null),n=e.ref(0);e.watch(()=>u.acitveIndex,l=>{n.value=l},{immediate:!0}),e.watch(n,l=>{s.value=r.value.querySelectorAll(".uv-tab-item");const{offsetWidth:a,offsetLeft:o}=s.value[l];if(v(a,o),u.scroll){const c=r.value,f=o-(c.offsetWidth-a)/2;b.scrollLeftTo(c,f)}});const m=l=>{d("change",l),n.value=l};e.onMounted(async()=>{await e.nextTick(),y()});const y=()=>{s.value=r.value.querySelectorAll(".uv-tab-item");const{offsetWidth:l,offsetLeft:a}=s.value[n.value];setTimeout(()=>{i.value.style.transition="transform 0.3s"},300),v(l,a)},v=(l,a)=>{i.value.style.width=`${l}px`,i.value.style.transform=`translateX(${a}px)`};return(l,a)=>(e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("div",{class:e.normalizeClass(["uv-tab",[t.scroll?"uv-tab-scroll":"",t.shrink?"uv-tab-shrink":""]]),style:e.normalizeStyle({backgroundColor:t.bgColor}),ref_key:"uvTabRef",ref:r},[e.createElementVNode("div",{ref_key:"uvTabLineRef",ref:i,class:"uv-tab-line",style:e.normalizeStyle({height:t.lineHeight,backgroundColor:t.lineColor})},null,4),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.list,(o,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["uv-tab-item",t.placeholder?t.placeholder===o?"":"uv-tab-acitve-item":n.value===c?"uv-tab-acitve-item":""]),onClick:f=>m(c),style:e.normalizeStyle({color:t.placeholder?t.placeholder===o?t.color:t.activeColor:n.value===c?t.activeColor:t.color}),key:o},[e.createElementVNode("div",null,e.toDisplayString(o),1)],14,g))),128))],6)]))}});module.exports=C;