foster-pc-vue/src/views/home/components/tabs.vue

<template>
    <div class="btn-group">
        <div
            :class="['btn-item', { active: active === index }]"
            @click="handleActive(index)"
            v-for="(item, index) in list"
            :key="index"
        >
            {{ item }}
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue'

const props = defineProps({
    list: {
        type: Array,
        defalut: [],
    },
});

const active = ref(0);
const handleActive = (i) => {
    active.value = i;
};
</script>

<style lang="scss" scoped>
.btn-group {
    font-size: 11px;
    display: flex;
    align-items: center;
    .btn-item {
        border-radius: 2px;
        padding: 3px 8px;
        margin-left: 8px;
        cursor: pointer;
        &.active {
            background: #4f4f4f;
        }
    }
}
</style>