foster-pc-vue/src/views/components/SelectMenu.vue

<template>
  <div :key="menuType">
    <div class="nav">
      <template v-for="item in labels" :key="item.id" >
        <div class="nav-btn cursor-pointer yse-events" @click.stop="select(item)" :class="[active.id == item.id ? 'nav-btn-active':'']">{{item.label}}</div>
      </template>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted,toRefs} from "vue"
let emits = defineEmits(["select"])
let props =  defineProps({
  labels: {
    type: Array,
    required:true
  }
  ,
  selectedIndex:{
    type: Number,
    default:1
  }
})
let active = ref(props.labels[props.selectedIndex])

function select(item){
  if(item.id === active.value.id){
    return;
  }
  active.value = item;
  emits("select", active.value)
}
onMounted(()=>{
  select(active.value)
})

</script>

<style lang="scss" scoped>


  .nav{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    .nav-btn{
      width:162px;
      height: 46px;
      border: none;
      background-image: url("@/assets/img/tabs_btn1.png");
      background-size: 100% 100%;
      color: #B4FFFB;
      font-size: 16px;
      font-weight: 500;
      line-height: 46px;
      text-align: center;
      margin: 0 16/16*1rem 0 16/16*1rem;
    }
    .nav-btn-active{
      background-image: url("@/assets/img/tabs_btn_active.png");
    }
  }


</style>