docs/.vuepress/sub-components/Tab.vue

<template>
  <div class="tabs">
    <div :class="['tab', index === 0 ? 'active' : null]" @click="select(0)">{{lang === 'en-US' ? 'Latest' : '最新'}}</div>
    <div :class="['tab', index === 1 ? 'active' : null]" @click="select(1)">{{lang === 'en-US' ? 'Topper' : '热门'}}</div>
    <div :class="['tab', index === 2 ? 'active' : null]" @click="select(2)">{{lang === 'en-US' ? 'My Favorite' : '我的收藏'}}</div>
    <div :class="['tab', index === 3 ? 'active' : null]" @click="select(3)">{{lang === 'en-US' ? 'My Works' : '我的发布'}}</div>
  </div>
</template>

<script>
export default {
  props: ['lang'],
  data() {
    return {
      index: 0
    }
  },
  methods: {
    select(index) {
      this.index = index;
      this.$emit('onChange', index)
    }
  }
}
</script>


<style scoped>
.tabs {
  background-color: #F3F5F8;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.tab {
  width: 112px;
  text-align: center;
  border-right: 1px solid #e9ebec;
  cursor: pointer;
  font-size: 14px;
}
.tab.active {
  background-color: #fff;
  color: #00b4ff;
  position: relative;
}
.tab.active:before {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  width: 100%;
  height: 3px;
  background-color: #00b4ff;
}
</style>