mpvue中实现一个自定义的切换tabs组件

vue文件：nomessage是自定义的一个组件，页面中没有数据时候显示在正中间的ICON和文字，以免没有数据页面枯燥！global.css可以先屏蔽或者去掉。全局的一个css文件

<template>
	<div class="box">
		<div class="nav">
			<div :class="{'selected':tab === 1,'title':true}" @click="changTab(1)">
				<p :class="tab === 1 ? 'p_active' : ''">未读</p>
			</div>
			<div :class="{'selected':tab === 2,'title':true}" @click="changTab(2)">
				<p :class="tab === 2 ? 'p_active' : ''">已读</p>
			</div>
			<div :class="{'selected':tab === 3,'title':true}" @click="changTab(3)">
				<p :class="tab === 3 ? 'p_active' : ''">全部</p>
			</div>
		</div>
		<div class="context">
			<div v-if="tab===1">
				<nomessage v-if="unreadCount != null || unreadCount != undefined"></nomessage>
				<strong v-else>未读{
   
   {unreadCount}}条</strong>
			</div>
			<div v-else-if="tab===2">
				<nomessage v-if="readCount != null || readCount != undefined"></nomessage>
				<strong v-else>已读{
   
   {readCount}}条</strong>
			</div>
			<div v-else>
				<nomessage v-if="total != null || total != undefined"></nomessage>
				<strong v-else>全部{
   
   {total}}条</strong>
			</div>
		</div>
	</div>
</template>
<script>
	import nomessage from "../../../components/owner/nomessage.vue";
	export default {
		components: {
			nomessage,
		},
		data() {
			return {
				tab: 1,
				unreadCount: 0,
				readCount: 0,
				total: 0
			}
		},
		methods: {
			changTab(index) {
				this.tab = index;
			}
		},
		onLoad() {
			this.$setTitle("消息列表");
		}
	}
</script>

<style src="../../../global/global.css"></style>
<style src="../notice/notice.css"></style>

css文件：

.box {
	width: 100%;
	font-size: 28rpx;
}

.nav {
	display: flex;
	height: 60rpx;
	line-height: 60rpx;
	color: #353535;
}

.nav div {
	flex: auto;
	-webkit-flex: auto;
}

.title {
	text-align: center;
}

.selected {
	color: #4675f9;
}

p {
	width: 70%;
	margin: 0 15%;
	height: 60rpx;
	line-height: 60rpx;
}

.p_active {
	border-bottom: 1rpx solid #4675f9;
}

.context {
	text-align: center;
	font-size: 50rpx;
	color: #353535;
}

效果：