smsb-web-develop/src/views/device/detail/components/Tabs.vue

<template>
  <div class="l-flex--row l-flex__none c-status-bar">
    <div
      v-for="tab in items"
      :key="tab.key"
      class="l-flex__none c-status-bar__item u-pointer"
      :class="{ active: tab.key === active }"
      @click="onClick(tab)"
    >
      {{ tab.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    active: {
      type: String,
      default: ''
    },
    items: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    onClick (tab) {
      this.$emit('update:active', tab.key)
    }
  }
}
</script>

<style lang="scss" scoped>
.c-status-bar {
  align-self: flex-start;
  padding: 4px;
  margin-bottom: $spacing;
  border-radius: 2px;
  background-color: #f4f7fb;
  overflow-x: auto;

  &__item {
    padding: 4px 10px;
    color: $info--dark;
    font-size: 16px;
    line-height: 1;

    & + & {
      margin-left: $spacing;
    }

    &.active {
      color: $blue;
      background-color: #fff;
      border-radius: inherit;
    }
  }
}
</style>