自定义tabs切换显示不同内容(Vue)

使用方法:
	(1)传入内容为标题的title数组
	(2)向外传递了一个currentIndex的方法,参数就是当前选中标题的索引
		根据索引展示不同内容

代码示例:

<template>
   <div class='tab'>
     <div class='tab-tit'>
         <span v-for='(item,index) in title' :key='index' :class='currentIndex === index?"on":""' @click="on(index)">{{item}}</span>
     </div>
   </div>
</template>

<script>
export default {
  name:'tabControl',
  props:['title'],
  data(){
    return{
      currentIndex:0
    }
  },
  methods:{
      on(index)
      {
          this.currentIndex=index;
          this.$emit('currentIndex',this.currentIndex)
      }
  }

}
</script>

<style scoped>
.tab{
    position:sticky;
    top:50px;
}

.tab-tit{
    display: flex;
    justify-content: space-evenly;
}
.tab-tit>span{
    padding-bottom: 5px ;
}
.on{
    color: #FF8E96;
    border-bottom: solid 2px #FF8E96;
}

</style>

效果图: