vue实现淘宝菜单
实现淘宝菜单的 Vue 方案
淘宝菜单通常包含多级分类、侧边栏导航、动态加载等功能。以下是基于 Vue 的实现方案：
数据结构设计
使用嵌套数组表示多级菜单：
menuData: [
{
id: 1,
name: '女装',
children: [
{ id: 11, name: '连衣裙' },
{ id: 12, name: 'T恤' }
]
},
{
id: 2,
name: '数码',
children: [
{ id: 21, name: '手机' },
{ id: 22, name: '电脑' }
]
}
]递归组件实现
创建可复用的菜单组件：
<template>
<div class="menu-item">
<div @click="toggle">
{{ item.name }}
<span v-if="hasChildren">{{ isOpen ? '-' : '+' }}</span>
</div>
<div v-show="isOpen && hasChildren" class="submenu">
<MenuItem
v-for="child in item.children"
:key="child.id"
:item="child"
/>
</div>
</div>
</template>
<script>
export default {
name: 'MenuItem',
props: ['item'],
data() {
return { isOpen: false }
},
computed: {
hasChildren() {
return this.item.children && this.item.children.length
}
},
methods: {
toggle() {
this.isOpen = !this.isOpen
}
}
}
</script>侧边栏布局
结合 Element UI 实现淘宝风格布局：
<template>
<div class="container">
<el-aside width="200px">
<MenuItem
v-for="item in menuData"
:key="item.id"
:item="item"
/>
</el-aside>
<el-main>
<!-- 内容区 -->
</el-main>
</div>
</template>
<style scoped>
.container {
display: flex;
}
.menu-item {
padding: 8px 12px;
cursor: pointer;
}
.submenu {
padding-left: 20px;
}
</style>动态加载优化
实现懒加载子菜单数据：
async loadChildren(item) {
if (!item.children) {
const res = await axios.get(`/api/menu/${item.id}`)
this.$set(item, 'children', res.data)
}
this.isOpen = true
}交互效果增强
添加鼠标悬停效果和过渡动画：
.menu-item:hover {
background-color: #f5f5f5;
}
.submenu {
transition: all 0.3s ease;
}移动端适配
使用媒体查询调整布局：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.el-aside {
width: 100%;
}
}这种实现方式提供了可扩展的菜单结构，支持无限级嵌套，并通过动态加载优化性能。实际项目中可根据需求添加图标、权限控制等扩展功能。
