vue实现左右菜单

实现左右菜单的基本思路

使用Vue实现左右菜单通常需要两个主要组件：左侧的导航菜单和右侧的内容区域。左侧菜单用于导航，右侧区域根据菜单选择动态展示内容。

创建左侧菜单组件

左侧菜单通常是一个列表，可以使用Vue的v-for指令动态生成菜单项。每个菜单项绑定点击事件，用于切换右侧内容。

<template>
  <div class="left-menu">
    <ul>
      <li 
        v-for="(item, index) in menuItems" 
        :key="index"
        @click="selectMenuItem(index)"
        :class="{ active: activeIndex === index }"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: '菜单项1', content: '内容1' },
        { title: '菜单项2', content: '内容2' },
        { title: '菜单项3', content: '内容3' }
      ],
      activeIndex: 0
    }
  },
  methods: {
    selectMenuItem(index) {
      this.activeIndex = index
      this.$emit('menu-change', this.menuItems[index].content)
    }
  }
}
</script>

<style>
.left-menu {
  width: 200px;
  background: #f0f0f0;
}
.left-menu ul {
  list-style: none;
  padding: 0;
}
.left-menu li {
  padding: 10px;
  cursor: pointer;
}
.left-menu li.active {
  background: #ddd;
}
</style>

创建右侧内容组件

右侧内容组件接收来自左侧菜单的内容并显示。

<template>
  <div class="right-content">
    {{ content }}
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: '请选择菜单项'
    }
  }
}
</script>

<style>
.right-content {
  flex: 1;
  padding: 20px;
}
</style>

组合左右组件

在主组件中将左右菜单组合起来，并通过事件通信实现联动。

<template>
  <div class="container">
    <LeftMenu @menu-change="updateContent" />
    <RightContent :content="currentContent" />
  </div>
</template>

<script>
import LeftMenu from './LeftMenu.vue'
import RightContent from './RightContent.vue'

export default {
  components: {
    LeftMenu,
    RightContent
  },
  data() {
    return {
      currentContent: ''
    }
  },
  methods: {
    updateContent(content) {
      this.currentContent = content
    }
  }
}
</script>

<style>
.container {
  display: flex;
  height: 100vh;
}
</style>

使用Vue Router实现路由切换

如果需要更复杂的导航，可以结合Vue Router实现路由级别的左右菜单。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from './views/Page1.vue'
import Page2 from './views/Page2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 }
  ]
})

修改左侧菜单组件使用router-link：

<template>
  <div class="left-menu">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index">
        <router-link :to="item.path">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: '页面1', path: '/page1' },
        { title: '页面2', path: '/page2' }
      ]
    }
  }
}
</script>

响应式布局调整

为适应不同屏幕尺寸，可以添加媒体查询调整布局。

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .left-menu {
    width: 100%;
    height: auto;
  }
}

使用状态管理

对于复杂应用，可以使用Vuex管理菜单状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    activeMenu: 'home'
  },
  mutations: {
    setActiveMenu(state, menu) {
      state.activeMenu = menu
    }
  }
})

在组件中提交mutation：

this.$store.commit('setActiveMenu', 'newMenu')