vue实现上下布局
实现上下布局的基本结构
在Vue中实现上下布局通常需要使用CSS的flexbox或grid布局方式。以下是一个基础的上下布局实现示例：
<template>
<div class="layout">
<header class="header">顶部区域</header>
<main class="content">主要内容区域</main>
</div>
</template>
<style scoped>
.layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
height: 60px;
background-color: #f0f0f0;
}
.content {
flex: 1;
overflow: auto;
}
</style>使用CSS Grid实现
CSS Grid提供了另一种实现方式，可以更灵活地控制布局：
<template>
<div class="grid-layout">
<header class="header">顶部区域</header>
<main class="content">主要内容区域</main>
</div>
</template>
<style scoped>
.grid-layout {
display: grid;
grid-template-rows: 60px 1fr;
height: 100vh;
}
.header {
background-color: #f0f0f0;
}
.content {
overflow: auto;
}
</style>响应式布局处理
为了在不同屏幕尺寸下保持良好的显示效果，可以添加媒体查询：
@media (max-width: 768px) {
.header {
height: 50px;
}
}固定顶部和滚动内容
如果需要顶部固定而内容区域可滚动，可以这样实现：
.layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
position: sticky;
top: 0;
z-index: 100;
}
.content {
flex: 1;
overflow-y: auto;
}使用Vue组件化结构
将布局拆分为可复用的组件：
<template>
<VerticalLayout>
<template #header>
<AppHeader />
</template>
<template #content>
<RouterView />
</template>
</VerticalLayout>
</template>创建VerticalLayout组件：
<template>
<div class="vertical-layout">
<div class="header">
<slot name="header"></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
</div>
</template>动态高度调整
如果需要根据内容动态调整高度，可以使用计算属性：
export default {
computed: {
headerHeight() {
return this.$refs.header?.clientHeight || 60
}
}
}然后在样式中使用：
.layout {
grid-template-rows: v-bind('headerHeight + "px"') 1fr;
}
