当前位置：首页 > VUE

vue实现三栏菜单

2026-01-20 17:38:14VUE

使用Vue实现三栏菜单

三栏菜单通常由左侧导航栏、中间内容区和右侧辅助栏组成。以下是实现方法：

基础结构 在Vue组件中定义三栏的HTML结构：

<template>
  <div class="three-column-layout">
    <div class="left-menu">
      <!-- 左侧菜单内容 -->
    </div>
    <div class="main-content">
      <!-- 主要内容区 -->
    </div>
    <div class="right-sidebar">
      <!-- 右侧边栏 -->
    </div>
  </div>
</template>

CSS布局 使用Flexbox实现三栏布局：

.three-column-layout {
  display: flex;
  height: 100vh;
}

.left-menu {
  width: 200px;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
}

.main-content {
  flex: 1;
  padding: 20px;
}

.right-sidebar {
  width: 250px;
  background-color: #f5f5f5;
  border-left: 1px solid #ddd;
}

动态菜单实现

数据驱动菜单 在Vue组件中定义菜单数据：

export default {
  data() {
    return {
      leftMenuItems: [
        { title: '首页', icon: 'home', link: '/' },
        { title: '产品', icon: 'products', link: '/products' },
        { title: '关于', icon: 'info', link: '/about' }
      ],
      rightMenuItems: [
        { title: '通知', icon: 'bell', count: 5 },
        { title: '消息', icon: 'message', count: 3 }
      ]
    }
  }
}

渲染菜单项 在模板中使用v-for渲染菜单：

<div class="left-menu">
  <div v-for="item in leftMenuItems" :key="item.link" class="menu-item">
    <i :class="`icon-${item.icon}`"></i>
    <span>{{ item.title }}</span>
  </div>
</div>

响应式处理

媒体查询适配移动端

@media (max-width: 768px) {
  .three-column-layout {
    flex-direction: column;
  }

  .left-menu, .right-sidebar {
    width: 100%;
    height: auto;
  }

  .left-menu {
    order: 1;
  }

  .main-content {
    order: 2;
  }

  .right-sidebar {
    order: 3;
  }
}

动态折叠侧边栏 添加折叠功能：

export default {
  data() {
    return {
      isLeftCollapsed: false,
      isRightCollapsed: false
    }
  },
  methods: {
    toggleLeftMenu() {
      this.isLeftCollapsed = !this.isLeftCollapsed;
    },
    toggleRightMenu() {
      this.isRightCollapsed = !this.isRightCollapsed;
    }
  }
}

状态管理

使用Vuex管理菜单状态 创建store模块：

const menuModule = {
  state: {
    leftMenuVisible: true,
    rightMenuVisible: true
  },
  mutations: {
    toggleLeftMenu(state) {
      state.leftMenuVisible = !state.leftMenuVisible;
    },
    toggleRightMenu(state) {
      state.rightMenuVisible = !state.rightMenuVisible;
    }
  }
}

组件中调用Vuex

vue实现三栏菜单

export default {
  computed: {
    leftMenuVisible() {
      return this.$store.state.menu.leftMenuVisible;
    }
  },
  methods: {
    toggleLeftMenu() {
      this.$store.commit('toggleLeftMenu');
    }
  }
}