AIProd/components/Header.vue

<template>
	<div id="header-container">
		<IntegratedLayout>
			<div class="navigation-container">
				<div class="logo">
					<img src="/logo/white-logo.png" />
					<span>AIProdLaunch</span>
				</div>
				<div class="flex">
					<div class="navigation-item pointer" v-for="item in navRoutes" :key="item.path"
						@click="handleParentClick(item)" @mouseenter="showSubmenu(item)" @mouseleave="hideSubmenu">
						<span
							:class="{ 'selected-navigation': $route.matched.some(record => record.path === item.path) }">{{
								item.meta.navigationName }}
								<i class="el-icon-arrow-down" v-if="item.meta.children"></i>
						</span>
						<div v-if="activeMenu === item.path && item.meta.children" class="submenu">
							<div v-for="sub in item.children" :key="sub.path" @click.stop="goto(sub.path)"
								class="submenu-item pointer">
								<img :src="`/logo/${sub.meta.icon}.png`" />
								{{ sub.name }}
							</div>
						</div>
					</div>
				</div>

			</div>
		</IntegratedLayout>

	</div>
</template>

<script>
import {
	routes
} from '../router';

export default {
	name: "Header",

	computed: {
		/**
		 * 得到routes的meta里非hidden的路由
		 */
		navRoutes() {
			const r = routes.filter(e => {
				if (e.meta) {
					return !e.meta.hidden
				}
				return false
			})
			return r
		},

		/**
		 * 得到当前的路由path
		 */
		currentRoutePath() {
			return this.$route.path
		}
	},
	data() {
		return {
			activeMenu: null
		}
	},
	methods: {
		handleParentClick(item) {
			// 只有没有子菜单时才跳转
			if (!item.children || item.children.length === 0) {
				this.goto(item.path);
			}
		},
		/**
		 * 编程式导航
		 * @param {String} path 导航的路径
		 */
		goto(path) {
			console.log(path)
			this.$router.push(path)
		},
		showSubmenu(item) {
			if (item.children) {
				this.activeMenu = item.path;
			}
		},
		hideSubmenu() {
			this.activeMenu = null;
		},
	}
};
</script>

<style lang="scss" scoped>
#header-container {
	width: 100%;
	height: $navigationBarHeight;
	background: $header-backgroungd;


	.navigation-container {
		height: $navigationBarHeight;
		display: flex;
		font-weight: 500;
		align-items: center;
		justify-content: space-between;

		.logo {
			@include flex-center;
			color: $white;

			span {
				font-size: $normal-font-size;
			}
		}

		.navigation-item {
			margin-left: 20px;
			padding: 10px;
			position: relative;

			span {
				color: $grey;

				&:hover {
					color: $white;
				}

				&.selected-navigation {
					color: $white;
				}
			}

			.submenu {
				z-index: 10;
				position: absolute;
				top: 100%;
				left: 50%;
				padding: 20px 10px;
				transform: translateX(-50%);
				background: $white;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				border-radius: 6px;

				&-item {
					white-space: nowrap; // 防止文字换行
					padding: 10px;
					color: #000000;
					@include display-flex;

					img {
						margin-right: 10px;
					}

					&:hover {
						background: #F5F6F9;
						color: $main-color;
					}
				}
			}
		}
	}
}
</style>