vue 导航tabs组件

<template>
  <section class="m_tabs">
    <div class="m_tabs_item"
         v-for="(item,index) in list"
         :class="{
         item_active:selectIndex === index}"
         @click="itemClick(item,index)">
      {{item.title}}
      <!-- <div class="item_btm_line"
           v-if="selectIndex === index"></div> -->
    </div>
    <div class="item_btm_line"
         :style="{left:lineLeft}"></div>
  </section>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      }
    },
    value: {
      type: Number,
      default: 0
    }
  },
  components: {

  },
  data () {
    return {
      selectIndex: 0,
      lineLeft: '20px'
    };
  },
  computed: {

  },
  created () {

  },
  mounted () {

  },
  watch: {
    value: {
      handler: function (value) {
        this.selectIndex = value;
        this.sliderLine(value)
      },
      immediate: true
    }
  },
  methods: {
    itemClick (item, index) {
      if (this.selectIndex != index) {
        this.selectIndex = index;
        this.sliderLine(index)
        this.$emit('onClick', item);
      }
      this.$emit('input', this.selectIndex)
    },
    sliderLine (index) {
      if (index != 0) {
        this.lineLeft = (index * 199.5 + 25) + 'px';
      } else {
        this.lineLeft = '25px';
      }
    }
  },
};
</script>

<style scoped lang="scss">
.m_tabs {
  margin: 0px auto;
  height: 50px;
  border: 1px solid #457ce0;
  display: flex;
  flex-flow: row nowrap;
  position: relative;
  border-radius: 5px;
  .m_tabs_item {
    width: 200px;
    height: 100%;
    color: #c6c6c2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    // .item_btm_line {
    //   position: absolute;
    //   background: $bfColor;
    //   width: 80%;
    //   height: 2px;
    //   bottom: 2px;
    //   transition: all;
    // }
  }
  .item_btm_line {
    position: absolute;
    background: $bfColor;
    width: 150px;
    height: 2px;
    left: 25px;
    bottom: 2px;
    transition: left 0.5s;
  }
  .item_active {
    color: $bfColor;
  }
}
</style>