使用方法:
(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>
效果图: