tab-item.vue

<template>
  <section :class="[tabClass]" class="h-tab-item" @click="titleClick">
    <div class="h-item">
      <slot/>
      <div class="bottom-border"/>
    </div>
    <div v-show="showDivider" class="tab-divider"/>
  </section>

</template>

<script>
export default {
  name: 'TabItem',
  data () {
    return {

    }
  },
  computed: {
    showDivider () {
      return this.$parent.showDivider
    },
    tabClass () {
      if (this.$parent.hasBorder) {
        return this.$parent.position === 'top' ? 'vue-1px-b' : 'vue-1px-t'
      }
    },
  },
  mounted () {
    this.$parent && this.$parent.items.push(this)
    this.$el.setAttribute('data-index', this.$parent.items.length - 1)
  },
  destroyed () {
    this.$parent && this.$parent.items.splice(this.$parent.items.indexOf(this), 1)
  },
  methods: {
    titleClick (event) {
      let vm = this
      vm.$parent.items.forEach(item => {
        item.$el.classList.remove('activated')
      })
      let clickIndex = Number(event.currentTarget.getAttribute('data-index'))
      event.currentTarget.classList.remove('activated')
      event.currentTarget.classList.add('activated')
      let clientWidth = event.currentTarget.clientWidth
      vm.$parent.actived(clickIndex, clientWidth)
    },

  },
}
</script>

<style lang="less">
  .hls-switch-tab {

    .tab-content {
      width: 100%;
      display: flex;
      align-items: center;

      .h-tab-item {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .h-item {
          width: 100%;
          min-width: 80px;
          font-size: 14px;
          height: 40px;
          color: #7c828d;
          line-height: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
         // padding: 0 3px;
          border-bottom: 1px solid rgba(255, 255, 255, .0); /*no*/
          .bottom-border{
            bottom: 0;
          }
        }

        &.activated {
          .h-item {
            color: @headerColor;
            .bottom-border{
              width: 65%;
              position: absolute;
              border-bottom: 1px solid @headerColor; /*no*/
            }
          }
        }
        .tab-divider {
          width: 1px; /*no*/
          height: 50%;
          background-color: rgb(214, 217, 218);
        }

        &:last-child {
          .tab-divider {
            width: 0px;
          }
        }
      }
    }
  }

</style>