顶部tab栏 tab-container

https://blog.csdn.net/michael_ouyang/article/details/76611351

<template>
	<div class="allOrders">
		<div class="nav">
			<mt-button class="tab" size="small" :class="{ activeColor: activeColor == 0 }" @click.native.prevent="
          active = 'tab-container1';
          oactive();
        ">全部</mt-button>
			<mt-button class="tab" size="small" @click.native.prevent="
          active = 'tab-container2';
          oactive();
        ">待收货</mt-button>
		</div>

		<div class="page-tab-container">
			<mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
				<mt-tab-container-item id="tab-container1">
					<!-- cell组件 -->
					<mt-cell title="tab-container 1">111</mt-cell>
				</mt-tab-container-item>
				<mt-tab-container-item id="tab-container2">
					<!-- cell组件 -->
					<mt-cell title="tab-container 2">222</mt-cell>
				</mt-tab-container-item>
			</mt-tab-container>
		</div>
	</div>
</template>

<script>
	export default {
		name: "page-tab-container",
		data: function() {
			return {
				active: "tab-container1",
				activeColor: 0
			};
		},

		methods: {
			oactive() {
				this.activeColor++;
			}
		}
	};
</script>

<style lang="less" scoped>
	.allOrders {
		.nav {
			display: flex;
			justify-content: space-between;
			border: 1px solid #e5e5e5;

			.tab {
				flex: 1;
				text-align: center;
				background-color: white;
				border: none;
				border-radius: 0;
				padding: 0;
				margin: 0;
			}

			.tab:hover {
				background-color: red;
				color: white;
			}

			.activeColor {
				background-color: red;
				color: white;
			}
		}
	}
</style>