zhny_ui/ems-ui-cloud/src/views/largeScreen/components/CusTabs.vue

<template>
  <div class="tabs">
    <div :class="{ 'tab-selected': active == item.value }" v-for="item in tabs" :key="item.value"
      @click="tabClick(item)">{{ item.name }}</div>
  </div>
</template>
<script>
export default {
  name: 'CustomTabs',
  props: {
    tabs: {
      type: Array,
      default: () => {
        return []
      }
    },
    active: {
      type: String | Number,
      default:null
    }
  },
  data () {
    return {
    };
  },
  mounted () { },
  methods: {
    tabClick (item) {
      this.$emit('update:active', item.value)
      this.$emit('tab-click', item)
    }
  }
}
</script>
<style lang='scss' scoped>
.tabs {
  display: flex;

  >div {
    padding: 2px 8px;
    background: #184770;
    color: #C1D8E3;
    cursor: pointer;
    border: none;
    font-size: 16px;
    &:first-of-type {
      border-radius: 4px 0 0 4px;
    }

    &:last-of-type {
      border-radius: 0 4px 4px 0;
    }
  }

  .tab-selected {
    background: #fff;
    color: #000;
    border-radius: 4px !important;
  }
}
</style>