hb_sis_zhfx/src/components/coms/tabs/tab.vue

<template>
  <div class="tabs">
    <div class="tab-item" v-for="(item, index) of data" :key="item" @click="select(index, item)" :class="{ active: activeIndex == index }">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  // 传参
  props: {
    // tab 项
    data: {
      type: Array,
      default: () => [
        {
          id: "day",
          text: "日",
        },
        {
          id: "month",
          text: "月",
        },
        {
          id: "year",
          text: "年",
        },
      ],
    },
  },
  // 事件
  emits: {
    select: null,
  },
  data() {
    return {
      activeIndex: 0,
    };
  },
  methods: {
    select(index, item) {
      this.activeIndex = index;
      this.$emit("select", item);
    },
  },
};
</script>

<style lang="less">
.tabs {
  display: flex;
  color: @font-color;
  margin-bottom: 1.111vh;
  font-size: @fontsize;
  .tab-item {
    padding: 0.37vh 1.852vh;
    cursor: pointer;

    &.active {
      color: @green;
      position: relative;
      background-image: @greenLinearTop;

      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 0.463vh;
        border: 0.093vh solid @green;
        border-top: 0;
        left: 0;
        bottom: 0;
        box-sizing: border-box;
      }
    }
  }
}
</style>