From 7f199d396989b430f625c152df5c5da708ed86ec Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期三, 30 四月 2025 14:46:55 +0800
Subject: [PATCH] homemenu click
---
src/components/HeaderMenu.vue | 242 ++++++++++++++++++++++++++----------------------
1 files changed, 132 insertions(+), 110 deletions(-)
diff --git a/src/components/HeaderMenu.vue b/src/components/HeaderMenu.vue
index 03c9743..97eff93 100644
--- a/src/components/HeaderMenu.vue
+++ b/src/components/HeaderMenu.vue
@@ -1,118 +1,140 @@
<template>
- <nav class="navbar navbar-expand-lg bg-light fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand" href="#">
- <img src="@/assets/logo/logo.png" alt="云游四方" class="logo" />
- <span class="text-xl font-bold">云游四方</span>
- </a>
- <button
- class="navbar-toggler"
- type="button"
- data-bs-toggle="collapse"
- data-bs-target="#navbarNav"
- aria-controls="navbarNav"
- aria-expanded="false"
- aria-label="Toggle navigation"
- >
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarNav">
- <ul class="navbar-nav">
- <li class="nav-item">
- <a
- class="nav-link active"
- aria-current="page"
- href="#"
- @click="navigateTo('/')"
- >首页</a
- >
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#" @click="navigateTo('/product')"
- >产品中心</a
- >
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#" @click="navigateTo('/about')"
- >关于我们</a>
- </li>
- </ul>
- </div>
- <div class="contact-phone d-none d-md-block">
- <img src="/icons/hotline.png" alt="电话" class="hot-line-img" />
- <span class="text-lg font-bold">13862676702</span>
- </div>
+ <nav class="navbar navbar-expand-lg bg-light fixed-top">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="#">
+ <img src="@/assets/logo/logo.png" alt="云游四方" class="logo" />
+ <span class="text-xl font-bold">云游四方</span>
+ </a>
+ <!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+ aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" >
+ <span class="navbar-toggler-icon"></span>
+ </button> -->
+ <button class="navbar-toggler btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+ aria-controls="navbarNav" aria-expanded="false" aria-label="导航菜单" ref="navbarToggler">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarNav">
+ <ul class="navbar-nav">
+ <li v-for="item in navItems" :key="item.label" class="nav-item">
+ <a class="nav-link" href="#" :class="{ active: isActive(item.path) }"
+ @click.prevent="navigateTo(item.path)">
+ {{ item.label }}
+ </a>
+ </li>
+ </ul>
</div>
- </nav>
- </template>
-
- <script setup>
- import { useRouter } from "vue-router";
-
- const router = useRouter();
-
- // Handle navigation for the menu items
- // const navigateTo = (path) => {
- // router.push(path);
- // };
+ <div class="contact-phone d-none d-md-block">
+ <img src="/icons/hotline.png" alt="电话" class="hot-line-img" />
+ <span class="text-lg font-bold">13862676702</span>
+ </div>
+ </div>
+ </nav>
+</template>
- const navigateTo = (path) => {
- // console.log('选中菜单:', index);
- if(path === '/logo'){
- router.push('/');
- }else if(path === '/about'){
- router.push({path:'/',hash:'#third-other'});
- }
- else{
- router.push(path);
- }
-
+<script setup>
+import { ref } from 'vue';
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute()
+
+const navItems = [
+ { label: '首页', path: '/' },
+ { label: '产品中心', path: '/product' },
+ { label: '关于我们', path: '/about#third-other' }
+];
+
+// Handle navigation for the menu items
+// const navigateTo = (path) => {
+// router.push(path);
+// };
+
+const isActive = (targetPath) => {
+ // 可根据需要改为更精确的匹配逻辑
+ return route.fullPath === targetPath || route.path === targetPath.split('#')[0];
};
- </script>
-
- <style scoped>
- .navbar {
- padding: 10px 20px;
+// navbarToggler 引用，用于手动触发点击事件
+const navbarToggler = ref(null);
+const navigateTo = (path) => {
+ if (path.includes('#')) {
+ const [basePath, hash] = path.split('#');
+ router.push({ path: basePath, hash: `#${hash}` });
+ } else {
+ router.push(path);
}
-
- .navbar-brand {
- display: flex;
- align-items: center;
- }
-
- .logo {
- width: 40px;
- height: 40px;
- margin-right: 10px;
- }
-
- .nav-link {
- font-size: 16px;
- }
-
- .contact-phone {
- display: flex;
- align-items: center;
- font-size: 14px;
- }
-
- .contact-phone .el-icon {
- margin-right: 5px;
- }
-
- .navbar-nav .nav-link {
- margin-right: 15px;
- }
-
- .fixed-top {
- z-index: 1000;
+ if (navbarToggler.value) {
+ navbarToggler.value.click();
}
- .hot-line-img{
- width: 20px;
- height: 20px;
- margin-right: 5px;
- }
- </style>
-
\ No newline at end of file
+};
+
+
+
+
+</script>
+
+<style scoped>
+.navbar {
+ padding: 10px 20px;
+}
+
+.navbar-brand {
+ display: flex;
+ align-items: center;
+}
+
+.logo {
+ width: 40px;
+ height: 40px;
+ margin-right: 10px;
+}
+
+.nav-link {
+ font-size: 16px;
+}
+
+.contact-phone {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+}
+
+.contact-phone .el-icon {
+ margin-right: 5px;
+}
+
+.navbar-nav .nav-link {
+ margin-right: 15px;
+}
+
+.fixed-top {
+ z-index: 1000;
+}
+
+.hot-line-img {
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+}
+</style>
+<style scoped>
+.navbar-nav .nav-link {
+ color: #000;
+ font-weight: normal;
+ padding: 10px 15px;
+ text-transform: uppercase;
+ transition: color 0.3s, background-color 0.3s;
+}
+
+.navbar-nav .nav-link:hover {
+ color: #007bff;
+}
+
+.navbar-nav .nav-link.active {
+ color: #007bff;
+ /* background-color: #007bff; */
+ font-weight: bold;
+ border-radius: 5px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3