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 scoped>
.left-menu {
  width: 200px;
  background: #f5f5f5;
}
.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 scoped>
.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: '内容1'
    }
  },
  methods: {
    updateContent(content) {
      this.currentContent = content
    }
  }
}
</script>

<style scoped>
.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'
import Page3 from './views/Page3.vue'

Vue.use(Router)

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

修改左侧菜单组件，使用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' },
        { title: '菜单3', path: '/page3' }
      ]
    }
  }
}
</script>

响应式布局调整

为适应不同屏幕尺寸，可以添加响应式样式。

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

以上方案提供了Vue实现左右菜单的完整方法，包括基础实现和结合Vue Router的高级用法。开发者可以根据实际需求选择适合的方案。