Vue实现左右菜单联动实现

最新推荐文章于 2025-05-08 14:41:18 发布

置顶

RainyCG

最新推荐文章于 2025-05-08 14:41:18 发布

阅读量6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 前端文章标签： VUe 左右联动菜单

本文链接：https://blog.youkuaiyun.com/ZC_XY/article/details/81588423

本文介绍了如何在Vue中实现左右菜单的联动效果。通过监听右边菜单的scroll事件，计算滚动距离并调整左边菜单的位置。组件设计为可接收动态数据，并支持通过点击左边菜单触发右边菜单滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

title: Vue实现左右菜单联动实现
date: 2018-08-11 16:31:34
tags:

源码传送门：Rain120/vue-study

之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用Vue来实现，将这个联动抽离成为一个单独的组件，废话少说，先来一张效果图。

Vue实现左右菜单联动效果图

这个组件分为两个部分，1、左菜单；2、右菜单。

动态数据结构

menus: [
  {
    name: '菜单1',
    data: [
      {
        name: '1.1'
      },
      {
        name: '1

200万优质内容无限畅学