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 | 39 +++++++++++++++++----------------------
1 files changed, 17 insertions(+), 22 deletions(-)
diff --git a/src/components/HeaderMenu.vue b/src/components/HeaderMenu.vue
index 3342123..97eff93 100644
--- a/src/components/HeaderMenu.vue
+++ b/src/components/HeaderMenu.vue
@@ -5,31 +5,15 @@
<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">
+ <!-- <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 class="nav-item">
- <a
- class="nav-link active"
- aria-current="page"
- href="#"
- @click.prevent="navigateTo('/')"
- >首页</a
- >
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#" @click.prevent="navigateTo('/product')"
- >产品中心</a
- >
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#" @click.prevent="navigateTo('/about#third-other')"
- >关于我们</a>
- </li>
- </ul> -->
<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) }"
@@ -48,6 +32,7 @@
</template>
<script setup>
+import { ref } from 'vue';
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
@@ -68,6 +53,9 @@
// 可根据需要改为更精确的匹配逻辑
return route.fullPath === targetPath || route.path === targetPath.split('#')[0];
};
+
+// navbarToggler 引用，用于手动触发点击事件
+const navbarToggler = ref(null);
const navigateTo = (path) => {
if (path.includes('#')) {
const [basePath, hash] = path.split('#');
@@ -75,8 +63,15 @@
} else {
router.push(path);
}
+ if (navbarToggler.value) {
+ navbarToggler.value.click();
+ }
+
};
+
+
+
</script>
<style scoped>
--
Gitblit v1.9.3