vue2.0实现一个直角梯形的tabbar组件

<template>
  <div class="crm-tab-bar" ref="tabBarRef">
    <div class="tab-bar-item-left" @click="changeTab(0)" :class="{ 'table-active': active == 0}">
      <div class="aaa"></div>
      <div class="bbb"></div>
      <div class="title">{{leftLabel}}</div>
    </div>
    <div class="tab-bar-item-right" @click="changeTab(1)" :class="{ 'table-active': active == 1}">
      <div class="aaa"></div>
      <div class="bbb"></div>
      <div class="title">{{rightLabel}}</div>
    </div>
    <div class="tabs-line" :style="style1"></div>
  </div>
</template>
<script>
export default {
  name: 'crm-tab-bar',
  props: {
    leftLabel: {
      type: String,
      default: '左侧'
    },
    rightLabel: {
      type: String,
      default: '右侧'
    }
  },
  data() {
    return {
      active: 0,
      style1: {}
    };
  },
  components: {},
  methods: {
    changeTab(val) {
      this.active = val;
      if (val == 0) {
        let num = this.$refs.tabBarRef.offsetWidth;
        this.style1 = {
          transform: `translateX(${num / 4}px) translateX(-50%)`
        };
      } else if (val == 1) {
        let num = this.$refs.tabBarRef.offsetWidth;
        this.style1 = {
          transform: `translateX(${(num / 4) * 3}px) translateX(-50%)`
        };
      }
      this.$emit('changeTab', this.active);
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.crm-tab-bar {
  position: relative;
  display: flex;
  height: 92px;
  justify-content: space-between;
  align-items: flex-end;
  .tab-bar-item-left {
    width: 50%;
    height: 92px;
    position: relative;
    display: flex;
    align-items: end;
    .aaa {
      position: absolute;
      width: 80%;
      height: inherit;
      background: rgba(237, 240, 242, 1);
      border-radius: 10px;
      color: #000;
      top: 0;
      bottom: 0;
      left: 0;
    }
    .bbb {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 50%;
      height: inherit;
      background: rgba(237, 240, 242, 1);
      border-radius: 10px;
      transform: skewX(20deg);
    }
  }
  .tab-bar-item-right {
    width: 50%;
    height: 92px;
    position: relative;
    display: flex;
    align-items: end;
    .aaa {
      position: absolute;
      width: 80%;
      height: inherit;
      border-radius: 10px;
      background: rgba(237, 240, 242, 1);
      color: #000;
      top: 0;
      bottom: 0;
      right: 0;
    }
    .bbb {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 50%;
      height: inherit;
      background: rgba(237, 240, 242, 1);
      border-radius: 10px;
      transform: skewX(20deg);
    }
  }
}
.title {
  width: 100%;
  height: 92px;
  position: absolute;
  z-index: 100;
  line-height: 100px;
  text-align: center;
}
.tabs-line {
  position: absolute;
  width: 40px;
  height: 8px;
  background-color: rgb(90, 111, 162);
  transform: translateX(170px) translateX(-50%);
  transition-duration: 0.3s;
}
.table-active {
  height: 104px !important;
  .aaa {
    background-color: #fff !important;
  }
  .bbb {
    background-color: #fff !important;
  }
}
</style>