vue 之封装一个简单的tabs组件

vue 之封装一个简单的tabs组件

<!-- Tabs标签页 -->
<template>
  <div class="tabs_wrapt">
    <div
      v-for="(item,index) in titles"
      :key="item"
      @click="itemClcik(index)"
      :class="active === index ? 'active': '' "
    >
      {{ item }}
      <div class="line" v-if="active === index"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      active: 0,
      titles: [
        "集团指标",
        "财务费用分析",
        "财务费用率分析",
        "信保额分析",
        "信保费分析"
      ]
    };
  },
  methods: {
    itemClcik(index) {
      this.active = index;
      this.$emit("tabsClick", index);
    }
  }
};
</script>
<style  lang="scss" scoped>
.tabs_wrapt {
  display: flex;
  flex-wrap: nowrap;
  height: 40px;
  line-height: 40px;
  background: #ccc;
  overflow-x: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  & > div {
    height: 100%;
    background: yellow;
    padding: 0 6px;
    //不让主轴压缩
    flex-shrink: 0;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333333;
    text-align: left;
  }
  .active {
    position: relative;
    font-family: PingFangSC-Medium;
    font-size: 17px;
    color: #000000;
    text-align: left;

    .line {
      position: absolute;
      top: 34px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 2px;
      background: #1e87f0;
      border-radius: 1.5px;
    }
  }
}
</style>