vue多级下拉菜单

### Vue 实现多级下拉菜单的方法 在 Vue 中实现多级下拉菜单可以通过多种方法完成，以下是几种常见的解决方案及其最佳实践。 #### 方法一：纯 CSS 和 HTML 的点击触发多级菜单 这种方法利用原生的 HTML 结构和 CSS 样式来构建多级菜单，并通过 JavaScript 或 Vue 控制其交互行为。这种方式简单高效，适合轻量化的项目需求[^1]。 ```html <template> <ul class="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Services ▾</a> <ul class="submenu"> <li><a href="#">Web Design</a></li> <li> <a href="#">Development ▸</a> <ul class="submenu"> <li><a href="#">Frontend</a></li> <li><a href="#">Backend</a></li> </ul> </li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </template> <style scoped> .menu { list-style-type: none; padding: 0; } .submenu { display: none; position: absolute; background-color: white; border: 1px solid #ccc; } .menu li:hover .submenu { display: block; } </style> ``` 此方法的核心在于 `hover` 和嵌套结构的设计，适用于简单的场景。 --- #### 方法二：结合 Vuetify 或 Element-UI 组件库 对于更复杂的业务逻辑或者需要快速开发的情况，可以借助成熟的前端框架（如 Vuetify、Element-UI），这些工具提供了内置的支持功能[^3]。 以下是一个基于 **Element-UI** 的递归组件实现： ```javascript <script> export default { name: 'RecursiveMenu', props: ['items'], }; </script> <template> <el-submenu v-if="item.children && item.children.length > 0" :index="item.path || ''" v-for="(item, index) in items" :key="index"> <template slot="title">{{ item.name }}</template> <recursive-menu :items="item.children"></recursive-menu> </el-submenu> <el-menu-item v-else :index="item.path" :key="item.name"> {{ item.name }} </el-menu-item> </template> ``` 上述代码展示了如何通过递归来动态加载 JSON 数据并渲染成多级菜单。 --- #### 方法三：关键词高亮增强用户体验 如果希望进一步提升用户的体验感，在展示搜索结果的同时支持关键词匹配与高亮，则可参考如下做法[^2]: ```html <template> <div @click="navigateToDetail(item)" v-for="(item, idx) in filteredItems" :key="idx"> <div v-html="highlightKeyword(item.title, searchQuery)"></div> </div> </template> <script> export default { data() { return { searchQuery: '', filteredItems: [] }; }, methods: { highlightKeyword(text, keyword) { const regExp = new RegExp(`(${keyword})`, 'gi'); return text.replace(regExp, '<span style="color:red">$1</span>'); } } }; </script> ``` 这种技术不仅可以用于普通的文本框输入过滤器，也可以扩展到复杂的数据表单中去应用。 --- ### 总结 以上介绍了三种不同的方式来创建一个多层折叠式的导航栏——从基础的手动编码样式定义直到依赖第三方插件自动处理一切细节；每种都有各自的优缺点以及适用范围，请根据实际项目的具体情况进行选择。