midi-h5/component/tab.vue

<template>
	<div class="navigation-container">
		<!-- 导航栏 -->
		<div class="nav-tabs">
			<div v-for="(tab, index) in tabs" :key="index" :class="['nav-tab', { active: activeTab === index }]"
				@click="switchTab(index)">
				{{ tab.value }}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "NavigationTabs",
		props: {
			// 外部传入的标签数据
			tabsData: {
				type: Array,
				default: () => [],
			},
			// 默认激活的标签索引
			defaultActive: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				activeTab: this.defaultActive,
				// 默认标签数据
				defaultTabs: [{
						key: "created",
						label: "我创建的",
						title: "我创建的内容",
						content: "这里显示您创建的所有内容和项目。",
					},
					{
						key: "hosted",
						label: "我主持的",
						title: "我主持的内容",
						content: "这里显示您正在主持的活动和会议。",
					},
					{
						key: "managed",
						label: "我管理的",
						title: "我管理的内容",
						content: "这里显示您管理的团队和资源。",
					},
					{
						key: "focused",
						label: "我关注的",
						title: "我关注的内容",
						content: "这里显示您关注的话题和动态。",
					},
				],
			};
		},
		computed: {
			// 使用外部数据或默认数据
			tabs() {
				return this.tabsData.length > 0 ? this.tabsData : this.defaultTabs;
			},
		},
		watch: {
			// 监听外部传入的默认激活标签变化
			defaultActive: {
				handler(newVal) {
					this.activeTab = newVal;
				},
				immediate: true,
			},
		},
		methods: {
			// 切换标签
			switchTab(index) {
				if (index !== this.activeTab) {
					this.activeTab = index;
					// 向父组件发射事件
					this.$emit("tab-change", {
						index: index,
						tab: this.tabs[index],
					});
				}
			},
			// 获取当前激活的标签数据
			getCurrentTab() {
				return this.tabs[this.activeTab];
			},
			// 程序化切换到指定标签
			setActiveTab(index) {
				if (index >= 0 && index < this.tabs.length) {
					this.switchTab(index);
				}
			},
		},
		mounted() {
			// 组件挂载后发射初始状态
			this.$emit("tab-change", {
				index: this.activeTab,
				tab: this.tabs[this.activeTab],
			});
		},
	};
</script>

<style scoped>
	.navigation-container {
		width: 100%;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
			"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	}

	/* 导航栏样式 */
	.nav-tabs {
		display: flex;
		font-size: 24rpx;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.nav-tab {
		flex: 1;
		text-align: center;
		cursor: pointer;
		/* transition: all 0.3s ease; */
		border-radius: 6px;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		position: relative;
		user-select: none;
		white-space: nowrap;
		 margin: auto 10rpx;
		 font-family: Source Han Sans CN, Source Han Sans CN;
	}

	.nav-tab:hover {
		/* background-color: rgba(255, 255, 255, 0.3); */
		color: #1a4332;
	}

	.nav-tab.active {
		color: #333333;
		font-size: 32rpx; 
		font-weight: 500;
		z-index: 5;
	}

	.nav-tab.active::after {
		content: "";
		position: absolute;
		bottom: 14rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		height: 16rpx;
		background-image: url('@/static/image/propMall/tabline.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 1px;
		z-index: -10;
		border-radius: 10rpx;
	}

	@media (max-width: 480px) {
		.nav-tabs {
			/* padding: 2px; */
		}

		.nav-tab {
			padding: 8px 4px;
			font-size: 12px;
		}
	}
/* 	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	} */
</style>