当前位置：首页 > VUE

vue实现三栏菜单

2026-02-21 09:23:41VUE

Vue 实现三栏菜单的方法

使用 Flex 布局实现三栏菜单

通过 Vue 的模板结合 CSS Flex 布局，可以快速实现三栏菜单结构。

<template>
  <div class="three-column-menu">
    <div class="left-menu">
      <!-- 左侧菜单内容 -->
    </div>
    <div class="middle-menu">
      <!-- 中间菜单内容 -->
    </div>
    <div class="right-menu">
      <!-- 右侧菜单内容 -->
    </div>
  </div>
</template>

<style>
.three-column-menu {
  display: flex;
  height: 100vh;
}
.left-menu, .right-menu {
  width: 200px;
  background-color: #f0f0f0;
}
.middle-menu {
  flex: 1;
  background-color: #ffffff;
}
</style>

使用 Grid 布局实现三栏菜单

CSS Grid 提供了更灵活的布局方式，适合复杂的三栏结构。

<template>
  <div class="grid-menu">
    <div class="left">Left Menu</div>
    <div class="center">Center Content</div>
    <div class="right">Right Menu</div>
  </div>
</template>

<style>
.grid-menu {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  height: 100vh;
}
.left, .right {
  background: #eee;
}
.center {
  background: #fff;
}
</style>

动态调整宽度

结合 Vue 的响应式特性，可以实现动态调整栏位宽度。

<template>
  <div class="dynamic-menu">
    <div class="left" :style="{ width: leftWidth + 'px' }">
      <button @click="adjustWidth(-50)">-</button>
      <button @click="adjustWidth(50)">+</button>
    </div>
    <div class="center">Content</div>
    <div class="right" :style="{ width: rightWidth + 'px' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: 200,
      rightWidth: 200
    }
  },
  methods: {
    adjustWidth(delta) {
      this.leftWidth += delta;
    }
  }
}
</script>

<style>
.dynamic-menu {
  display: flex;
  height: 100vh;
}
.center {
  flex: 1;
}
</style>

嵌套路由的三栏布局

在 Vue Router 中实现三栏布局，中间区域作为路由出口。

<template>
  <div class="router-layout">
    <nav class="left-nav">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <main class="main-content">
      <router-view></router-view>
    </main>
    <aside class="right-aside">
      Additional Info
    </aside>
  </div>
</template>

<style>
.router-layout {
  display: flex;
  min-height: 100vh;
}
.left-nav {
  width: 200px;
}
.main-content {
  flex: 1;
}
.right-aside {
  width: 250px;
}
</style>

响应式三栏菜单

通过媒体查询实现移动端适配，将三栏转为单栏。

<style>
.three-column-menu {
  display: flex;
}
.left-menu, .right-menu {
  width: 25%;
}
.middle-menu {
  width: 50%;
}

@media (max-width: 768px) {
  .three-column-menu {
    flex-direction: column;
  }
  .left-menu, .middle-menu, .right-menu {
    width: 100%;
  }
}
</style>

vue实现三栏菜单