vue3实现菜单
Vue3 实现菜单的基本方法
使用 Vue3 的 Composition API 和响应式特性可以高效地实现动态菜单。以下是一个基础实现方案：
创建菜单数据结构
const menuItems = ref([
{
title: '首页',
path: '/',
children: []
},
{
title: '产品',
path: '/products',
children: [
{ title: '产品列表', path: '/products/list' }
]
}
])递归组件实现多级菜单
<template>
<ul>
<li v-for="item in items" :key="item.path">
<router-link :to="item.path">{{ item.title }}</router-link>
<menu-item v-if="item.children?.length" :items="item.children"/>
</li>
</ul>
</template>
<script setup>
defineProps({
items: {
type: Array,
required: true
}
})
</script>使用 Vue Router 集成
结合 Vue Router 可以实现路由跳转和菜单高亮：
import { useRoute } from 'vue-router'
const route = useRoute()
const isActive = (path) => {
return route.path === path
}动态菜单权限控制
通过权限验证动态生成菜单：
const filteredMenu = computed(() => {
return menuItems.value.filter(item => {
return checkPermission(item.requiredRole)
})
})菜单状态管理
使用 Pinia 管理菜单展开状态：
// stores/menu.js
export const useMenuStore = defineStore('menu', {
state: () => ({
expandedItems: []
}),
actions: {
toggleExpand(path) {
const index = this.expandedItems.indexOf(path)
index === -1
? this.expandedItems.push(path)
: this.expandedItems.splice(index, 1)
}
}
})响应式菜单样式
添加 CSS 过渡效果增强用户体验：
.menu-enter-active,
.menu-leave-active {
transition: all 0.3s ease;
}
.menu-enter-from,
.menu-leave-to {
opacity: 0;
transform: translateY(-10px);
}移动端适配方案
实现可折叠的移动端菜单：
<template>
<button @click="toggleMobileMenu">菜单</button>
<transition name="menu">
<div v-show="isMobileMenuOpen" class="mobile-menu">
<menu-item :items="menuItems"/>
</div>
</transition>
</template>性能优化建议
对于大型菜单系统，考虑虚拟滚动技术：
import { useVirtualList } from '@vueuse/core'
const { list, containerProps } = useVirtualList(
menuItems,
{ itemHeight: 48 }
)这些实现方式可以根据具体需求进行组合和扩展，构建出功能完善且用户体验良好的菜单系统。
