vue实现左右菜单联动实现
Vue 实现左右菜单联动
数据绑定与状态管理
使用 Vue 的响应式数据特性，将左右菜单的数据绑定到同一个状态对象。通过 v-model 或 :value 实现双向绑定，确保一侧菜单的变化能实时反映到另一侧。
data() {
return {
leftMenu: [],
rightMenu: [],
activeItem: null // 当前选中项
};
}事件监听与联动逻辑
为左右菜单的点击事件添加监听器，通过事件触发更新另一侧菜单的状态。使用 @click 或自定义事件实现交互。
methods: {
handleLeftClick(item) {
this.activeItem = item;
this.rightMenu = this.generateRightMenu(item); // 根据左菜单项生成右菜单
},
handleRightClick(item) {
// 右菜单点击逻辑
}
}动态渲染右菜单
根据左菜单的选中项动态生成右菜单内容。可以通过计算属性或方法实现数据的过滤与映射。
computed: {
filteredRightMenu() {
return this.rightMenu.filter(item => item.parentId === this.activeItem.id);
}
}样式与交互优化
为选中项添加高亮样式，增强用户体验。通过 :class 动态绑定样式类。
<div
v-for="item in leftMenu"
:key="item.id"
@click="handleLeftClick(item)"
:class="{ 'active': item.id === activeItem?.id }"
>
{{ item.name }}
</div>示例完整代码
以下是一个简单的实现示例：
<template>
<div class="menu-container">
<div class="left-menu">
<div
v-for="item in leftMenu"
:key="item.id"
@click="handleLeftClick(item)"
:class="{ 'active': item.id === activeItem?.id }"
>
{{ item.name }}
</div>
</div>
<div class="right-menu">
<div
v-for="item in filteredRightMenu"
:key="item.id"
@click="handleRightClick(item)"
>
{{ item.name }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
leftMenu: [
{ id: 1, name: '菜单1' },
{ id: 2, name: '菜单2' }
],
rightMenu: [
{ id: 11, name: '子菜单1-1', parentId: 1 },
{ id: 12, name: '子菜单1-2', parentId: 1 },
{ id: 21, name: '子菜单2-1', parentId: 2 }
],
activeItem: null
};
},
computed: {
filteredRightMenu() {
return this.rightMenu.filter(item => item.parentId === this.activeItem?.id);
}
},
methods: {
handleLeftClick(item) {
this.activeItem = item;
},
handleRightClick(item) {
console.log('右菜单点击:', item);
}
}
};
</script>
<style>
.menu-container {
display: flex;
}
.left-menu, .right-menu {
width: 200px;
border: 1px solid #eee;
}
.active {
background-color: #f0f0f0;
}
</style>扩展功能
- 使用 Vuex 或 Pinia 管理全局状态，适合复杂场景。
- 添加动画过渡效果，提升交互体验。
- 支持多级菜单联动，通过递归组件实现。
