<template>

    <div class="tab-control">

        <div v-for="(item , index) in title" class="tab-control-item"

        :class="{active: index ===  currentIndex}" @click='itemClick(index)'>

            <span>{{item}}</span>

        </div>

    </div>

</template>

<script>

export default {

    name: 'TabControl',

    data:{

        title:["新款" , "流行" , "推荐"]

            }

        }

    },

    data(){

    return{

      currentIndex: 0

    }

  },

  methods: {

    itemClick(index){

      this.currentIndex = index;

      this.$emit('tabClick', index)

    }

  },

}

</script>

<style scoped>

     .tab-control{

    display: flex;

    text-align: center;

    font-size: 15px;

    height: 40px;

    line-height: 40px;

    background-color: #fff;

  }

  .tab-control-item{

    flex:1;

  }

  .tab-control-item span{

    padding: 5px;

  }

  .active{

    color: deeppink

  }

  .active span{

    border-bottom: 3px solid  deeppink;

  }

  .tab-control{

      position: sticky;

      top: 44px

  }

</style>