vue 弧形tab切换组件

<template>
<div class="tab">
  <div class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'active':index == activeIndex}" @click="changeTab(index)">
    <div class="item">
      {{item.title}}
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'tabIndex',
  props: {
    tabList: {
      type: Array,
      default: () => [{
          title: '已完成',
        },
        {
          title: '未完成',
        },
        {
          title: '已结束',
        },
      ]
    }
  },
  data() {
    return {
      activeIndex: 0,
    }
  },
  methods: {
    changeTab(index) {
      this.activeIndex = index;
      this.$emit('click', index);
    }
  },

}
</script>

<style lang="scss" scoped>
.tab {
  display: flex;
  justify-content: space-around;
  .tab-item {
    background-color: #eee;
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0 10px;
    border-radius: 10px 10px 0 0;
    position: relative;
    transform: perspective(30px) rotateX(10deg);
    .item {
      transform: perspective(30px) rotateX(-10deg);
      margin-top: 5px;
    }
  }
  $w:30px;
  $w1:29px;
  $actColor:#0056f5;
  .tab-item::after,
  .tab-item::before {
    position: absolute;
    content: '';
    width: $w;
    height: $w;
    bottom: 0;
    background-color: #eee;
    border: none;
  }
  .tab-item::after {
    right: -$w1;
    background: radial-gradient(circle at 100% 0, transparent $w, #eee $w);
  }
  .tab-item::before {
    left: -$w;
    background: radial-gradient(circle at 0 0, transparent $w, #eee $w);
  }
  .active {
    z-index: 10;
    &::after {
      background: radial-gradient(circle at 100% 0, transparent $w, $actColor $w);
    }
    &::before {
      background: radial-gradient(circle at 0 0, transparent $w, $actColor $w);
    }
    background-color: $actColor;
    color: #fff;
  }
}
</style>