demo-library/library-activity/src/components/wuc-tab/wuc-tab.vue

<template>
	<div>
		<div  class="text" v-if="!textFlex">
			  <div class="wuc-tab-item"  :class="[index === tabCur ? selectClass + ' cur':'']" v-for="(item,index) in tabList"
				:key="item.id"
				:id="item.id"
				@click="tabSelect(index,item.id,index,item.code,item.id,item)"  >
				<div :class="item.icon"></div>
				<span>{{item.name}}</span>
			  </div>
		</div>
		<div class="flex text-center" v-if="textFlex">
			  <div class="wuc-tab-item flex-sub" :class="index === tabCur ? selectClass + ' cur':''" 	v-for="(item,index) in tabList"
				:key="index"
				:id="index"
				@click="tabSelect(index,item.code,item.id,item)" >
				<div :class="item.icon"></div>
				<span>{{item.name}}</span>
			  </div>
		</div>
    </div>
</template>
<script>
import { reactive,computed,onMounted,getCurrentInstance } from 'vue';	
export default {
  name: "wuc-tab",
  data() {
    return {};
  },
  props: {
    tabList: {
      type: Array,
      default() {
        return [];
      },
    },
    tabCur: {
      type: Number,
      default() {
        return 0;
      },
    },
    tabClass: {
      type: String,
      default() {
        return "";
      },
    },
    tabStyle: {
      type: String,
      default() {
        return "";
      },
    },
    textFlex: {
      type: Boolean,
      default() {
        return true;
      },
    },
    selectClass: {
      type: String,
      default() {
        return "text-blue";
      },
    },
  },
  setup(props, context){
	  	const { proxy } = getCurrentInstance() 
		let  moveHandle = () => {
		}
		let  tabSelect = (index, e, s, item) => {
			context.emit("update:tabCur", index);
			context.emit("change", index);
			context.emit("chengeid", e);
			context.emit("chengeclass", s);
			context.emit("changeitem", item);
			if(index > 0) {
				let tab = document.getElementsByClassName('wuc-tab-item');
				for (let i = 0; i < tab.length; i++) {
					tab[i].style.color = '#666666';
				}
			} else {
				let tab = document.getElementsByClassName('wuc-tab-item');
				for (let i = 0; i < tab.length; i++) {
					tab[i].style.color = '#fff';
				}
			}
		}
		return {
			scrollLeft: computed(function(){
				return (props.tabCur - 1) * 60;
			 }
			),
			moveHandle,
			tabSelect
		}
    }
};
</script>
<style scoped>
div,
scroll-view,
swiper {
  box-sizing: border-box;
}
.wuc-tab {
  white-space: nowrap;
}
.wuc-tab :deep(.uni-scroll-view::-webkit-scrollbar) {
  display: none;
}
.wuc-tab-item {
  color: white;
  display: inline-block;
  margin: 0 0.10rem;
  padding: 0 0.20rem;
  font-size: 0.32rem;
}
.wuc-tab.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1024;
  box-shadow: 0 0.01rem 0.06rem rgba(0, 0, 0, 0.1);
}
.flex-sub {
  flex: 1 !important;
}
.text-red {
  color: #333333;
  font-size: 0.36rem;
  font-weight: bold;
  position: relative;
  height: 0.80rem;
}
.text-red:after {
  content: "";
  position: absolute;
  bottom: 0px;
  top: auto;
  left: 60%;
  height:0.08rem;
  margin-left: -20%;
  width: 0.43rem;
  border-radius: 0.15rem;
  background-color: #0499f8;
}
.text-blue {
  color: #333333 !important;
  font-size: 0.36rem;
  font-weight: bold;
  height: 0.82rem;
  line-height: 0.82rem;
  position: relative;
}
.text-blue:after {
  content: "";
  position: absolute;
  bottom: 0px;
  top: auto;
  left: 50%;
  height: 0.08rem;
  margin-left: -0.20rem;
  width: 0.36rem;
  border-radius: 0.04rem;
  background-color: #0499f8;
}
.text-list1 span {
  font-weight: bold;
}
.text-list2 span {
  background: rgba(7, 27, 77, 0.4);
  border-radius: 0.36rem;
  padding: 0.06rem 0.24rem;
}
.text-Subclass span {
  background: #16c7c5;
  border-radius: 0.36rem;
  color: #ffffff;
  padding: 0.06rem 0.24rem;
}
.text-white {
  color: #ffffff;
  font-size: 0.36rem;
  font-weight: bold;
  height: 0.82rem;
  line-height: 0.82rem;
  position: relative;
}
.text-white:after {
  content: "";
  position: absolute;
  bottom: 0px;
  top: auto;
  left: 50%;
  height: 0.08rem;
  margin-left: -0.20rem;
  width: 0.36rem;
  border-radius: 0.04rem;
  background-color: #ffffff;
}
.bg-white {
  background-color: #ffffff;
}
.bg-blue {
  background-color: rgb(4, 167, 242);
  color: white;
  border-radius: 0.40rem;
  padding: 0 0.20rem;
}
.text-orange {
  color: #f37b1d;
}
.text-xl {
  font-size: 0.36rem;
}
.knowLEdgeTab {
  color: #e5e5e5;
  font-size: 0.36rem;
  height: 0.90rem;
  line-height: 0.90rem;
}
.sortItem .wuc-tab-item {
  color: #333333;
  font-size: 0.28rem;
  padding: 0 0.50rem;
  height: 0.60rem;
  line-height: 0.60rem;
  background-color: #f3f5f4;
  border-radius: 0.30rem;
}
.sortOnItem {
  color: #1685fb !important;
  background-color: #e7f5fe !important;
}
.FindTabClass {
  color: #222222;
  font-size: 0.28rem;
  height: 0.84rem;
  line-height: 0.76rem;
}
.topTabList2  .wuc-tab-item{
	color: #333333;
}
.topTabList2 .text-white:after{
	background-color: #333333;
}
</style>