mky-vent-base/src/views/vent/gas/components/tab/baseTab.vue

<template>
  <div class="tabs w-100% flex text-center">
    <div
      v-for="tab in tabs"
      :key="tab.id"
      class="flex-1 cursor-pointer pt-1px pb-1px"
      :class="{ tabs_pane_actived: id === tab.id }"
      @click="clickHandler(tab.id)"
    >
      <slot name="name">
        {{ tab.name }}
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts" name="gas-pump-monitor">
  import { defineProps } from 'vue';

  defineProps<{
    tabs: { name: string; id: string | number }[];
    id: string | number;
  }>();
  const emit = defineEmits(['change', 'update:id']);

  function clickHandler(id) {
    emit('change', id);
    emit('update:id', id);
  }
</script>

<style lang="less" scoped>
  @import '@/design/theme.less';

  .tabs {
    font-weight: bold;
    background-color: @vent-gas-tab-bg;
    border-radius: 5px 5px 0 0;
    color: @vent-font-color;
  }

  .tabs_pane_actived {
    background-color: @vent-gas-tab-bg-avtived;
    border-radius: 5px 5px 0 0;
    border-bottom: 5px solid @vent-gas-tab-border;
  }
</style>