vue3导航栏下拉菜单

### 创建带有下拉菜单的导航栏 为了在 Vue3 中创建带有下拉菜单的导航栏，可以采用组合式 API 和模板中的事件绑定与条件渲染相结合的方式。下面是一个完整的示例。 #### 组件结构设计 定义一个名为 `Navbar` 的组件，在其中包含触发器（如按钮或链接）以及对应的下拉列表部分： ```vue <template> <nav class="navbar"> <ul class="menu-list"> <!-- 导航条目 --> <li v-for="(item, index) in menuItems" :key="index"> <a href="#" @click.prevent="toggleDropdown(index)"> {{ item.title }} </a> <!-- 下拉子菜单 --> <transition name="fade"> <ul v-if="activeIndex === index" class="dropdown-menu"> <li v-for="subItem in item.subItems" :key="subItem.id"> <router-link :to="subItem.path">{{ subItem.name }}</router-link> </li> </ul> </transition> </li> </ul> </nav> </template> ``` #### 脚本逻辑编写 通过脚本来管理状态变化并处理用户交互行为： ```javascript <script setup> import { ref } from 'vue'; // 定义数据模型 const activeIndex = ref(null); const menuItems = [ { title: "产品", subItems: [ { id: 1, path: "/product/one", name: "产品1" }, { id: 2, path: "/product/two", name: "产品2" } ] }, // 更多项目... ]; function toggleDropdown(idx) { if (idx === activeIndex.value) { activeIndex.value = null; } else { activeIndex.value = idx; } } </script> ``` #### 添加样式支持 为了让用户体验更佳，还需要适当调整 CSS 来美化界面布局和过渡效果: ```css <style scoped> .navbar .menu-list li ul.dropdown-menu { display:none; } /* 当激活时显示 */ .navbar .menu-list li:hover > ul, .navbar .menu-list li ul.show { display:block; } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } .fade-enter-from,.fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> ``` 上述代码展示了如何利用 Vue3 实现基本功能的同时也考虑到了良好的视觉反馈[^1]。对于实际应用而言，可能还需进一步优化性能、增强可访问性和解决潜在的安全隐患等问题。