vue实现三栏菜单
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>
