vue分割开的tab组件效果

一，实现效果

本来可以直接使用element-ui组件来实现的，但是这里 中间断开了，所以只能自己写了：

二，实现思路

三，具体代码

<template>
	<div>
		<!-- 头部区域 -->
		<page-head ></page-head>
		<!-- tab栏目区域 -->
		<ul class="tabBox">
			<li 
				class="tabItem" 
				v-for="(item,index) in tabList" 
				:key="index" 
				:class="index === currentActive ? 'active' : ''" 
				@click.self="changeTab(index)"
				>
				{{item}}
			</li>
		</ul>
		<!-- 具体信息设置区域 -->
		<el-card shadow="never">
			<!-- 商家信息设置组件 -->
			<template class="businessInfo" v-if="currentActive===0">
				<business-info></business-info>
			</template>
			<!-- 外卖管理组件 -->
			<template class="takeawayManage" v-if="currentActive===1">
				外卖管理
			</template>
			<!-- 预约管理组件 -->
			<template class="bookManage" v-if="currentActive===2">
				预约管理
			</template>
			<!-- 点餐白名单组件 -->
			<template class="order_white_list" v-if="currentActive===3">
				点餐白名单
			</template>
			<!-- 第三方配送组件 -->
			<template class="thirdParty" v-if="currentActive===4">
				第三方配送
			</template>
			<!-- 账号安全组件 -->
			<template class="accountSecurity" v-if="currentActive===5">
				账号安全
			</template>
			<!-- 公众号设置组件 -->
			<template class="accountSetting" v-if="currentActive===6">
				公众号设置
			</template>
			
		</el-card>
	</div>
</template>

<script>
	import pageHead from '../../components/pageHead'
	import businessInfo from './setting/BusinessInfo'
	export default{
		data(){
			return{
				tabList:['商家信息','外卖管理','预约管理','点餐白名单','第三方配送','账号安全','公众号设置'],
				currentActive:0
			}
		},
		components:{
			pageHead,
			businessInfo
		},
		methods:{
			//点击tab栏目实现样式变化
			changeTab(index){
				this.currentActive=index
			}
		}
	}
</script>

<style lang="less" scoped>
	.tabBox{
		display: flex;
		align-items: center;
		height: 80px;
		margin: 15px;
		background-color: #ffffff;
		justify-content: start;
		.tabItem{
			width: 100px;
			height: 40px;
			color: #000000;
			font-size: 14px;
			line-height: 40px;
			text-align: center;
			border: 1px solid #ccc;
			border-left: none;
			cursor: pointer;
			&:first-child{
				border-left: 1px solid #ccc;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
				margin-left: 20px;
			}
			&:last-child{
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
		}
		.active{
			background-color: #D89968;
			color: #ffffff;
		}
	}
	.el-card{
		margin: 0 15px 15px;
	}	
</style>