vue封装tab组件

<template>
  <div class="tab-wrapper" :id="'tab_' + tabType">
    <!-- <span class="active-bar" :style="{'top': `${activeIndex * 30}px`}"></span> -->
    <span class="active-bar" :style="{'top': `${currentIdx * 30}px`}" v-if="tabType == 'horizontal'"></span>
    <span class="active-bar" :style="{'left': `${currentIdx * 150}px`}" v-if="tabType == 'vertical'"></span>
    <ul>
      <li v-for="(v, idx) in list" :key="v.id" @click="tabClick(v, idx)" @mouseenter="tabmouseEn(v, idx)" @mouseleave="tabmouseLe(v, idx)">{{v.name}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeIndex: 0,
      currentIdx: 0,
      list: [
        {
          id: 1,
          name: 'label1'
        },
        {
          id: 2,
          name: 'label2'
        },
        {
          id: 3,
          name: 'label3'
        },
        {
          id: 4,
          name: 'label4'
        }
      ]
    }
  },
  props: {
    tabList: {
      type: Array,
      default: () => []
    },
    tabType: {
      type: String,
      default: 'vertical'
    }
  },
  methods: {
    tabClick (v, idx) {
      this.activeIndex = idx;
      this.$emit('click', v, idx);
    },
    tabmouseLe (v, idx) {
      console.log(v, idx);
      this.currentIdx = this.activeIndex;
    },
    tabmouseEn (v, idx) {
      console.log(v, idx);
      this.currentIdx = idx;
    }
  }
};
</script>
<style lang="scss" scoped>
  #tab_vertical {
    width: 100%;
    .active-bar {
      position: absolute;
      top: 28px;
      left:0;
      height: 2px;
      width: 150px;
    }
    ul {
      display: flex;
      li {
        width: 150px;
      }
    }
  }
  .tab-wrapper {
    position:relative;
    width:150px;
    .active-bar {
      position: absolute;
      top: 0;
      right:0;
      height:30px;
      width: 2px;
      background:blue;
      transition: all .3s;
    }
    ul {
      li {
        height: 30px;
        width:150px;
        background:#ccc;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
</style>