zhywpt-sp/subpackage/service/remind/components/evaluate-tab-item.vue

<!-- 评价列表筛选 item -->
<template>
	<view class="tabs">
		<view class="tab as-gravity-center" v-for="(tab,index) in tabs" :key="index" 
		:class="curIndex === index ? 'active' : 'normal'" @click="tabClickHandle(tab,index)">
			{{tab}}
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	defineProps({
		tabs:{
			type:Array,
			default:() => {
				return [];
			}
		}
	})
	
	const curIndex = ref(0);
	const emit = defineEmits(['tabClick'])
	
	const tabClickHandle = (item,index) =>{
		curIndex.value = index;
		emit('tabClick',item);
	}
	
</script>

<style lang="scss" scoped>
	.tabs{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-right: -30rpx;
		margin-top: -16rpx;
		
		.tab{
			font-size: 24rpx;
			min-width: 135rpx;
			height: 52rpx;
			border-radius: 26rpx;
			margin-right: 30rpx;
			margin-top: 16rpx;
		}
		.normal{
			color: #333333;
			background-color: white;
			border: 1px solid #999999;
		}
		.active{
			color: white;
			background: #00B38B;
		}
	}
</style>