本文介绍了如何使用Vue实现左右菜单联动效果，包括组件结构、动态数据、DOM结构、事件监听、高度计算以及左右菜单的交互逻辑。通过监听右边菜单的滚动事件，实时调整左边菜单的选中状态，同时允许用户点击左边菜单来切换右边菜单的内容。
title: Vue实现左右菜单联动实现
date: 2018-08-11 16:31:34
tags:
Vue
左右联动
top: 100
copyright: true
根据掘金评论需求，更新了数据接口并修复了一些问题
之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用Vue来实现，将这个联动抽离成为一个单独的组件，废话少说，先来一张效果图。
这个组件分为两个部分，1、左菜单；2、右菜单。
动态数据结构
menus: [
{
name: '菜单1',
data: [
{
name: '1.1'
},
{
name: '1.2'
},
{
name: '1.3'
},
{
name: '1.4'
},
{
name: '1.5'
},
{
name: '1.6'
}
]
}
]
复制代码
data数据是用户自定义增加一些内容ÿ
最低0.47元/天 解锁文章
1340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
