vue实现上下分栏
Vue 实现上下分栏布局
上下分栏布局通常指将页面垂直划分为两个部分，可以通过以下方法实现：
方法一：使用 CSS Flexbox 布局
<template>
<div class="container">
<div class="top-section">顶部内容区域</div>
<div class="bottom-section">底部内容区域</div>
</div>
</template>
<style scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top-section {
flex: 1;
background-color: #f0f0f0;
}
.bottom-section {
flex: 1;
background-color: #e0e0e0;
}
</style>方法二：使用 CSS Grid 布局
<template>
<div class="grid-container">
<div class="header">头部区域</div>
<div class="content">主要内容区域</div>
</div>
</template>
<style scoped>
.grid-container {
display: grid;
grid-template-rows: 100px 1fr;
height: 100vh;
}
.header {
background-color: #ddd;
}
.content {
background-color: #eee;
}
</style>方法三：使用百分比高度
<template>
<div>
<div style="height: 30%; background: #f5f5f5;">上部分</div>
<div style="height: 70%; background: #e5e5e5;">下部分</div>
</div>
</template>方法四：使用 Vue 组件实现可调整分栏
<template>
<div class="resizable-container">
<div
class="top-panel"
:style="{ height: topHeight + 'px' }"
>
可调整的顶部面板
</div>
<div class="divider" @mousedown="startResize"></div>
<div class="bottom-panel">
底部面板
</div>
</div>
</template>
<script>
export default {
data() {
return {
topHeight: 200,
isResizing: false
}
},
methods: {
startResize(e) {
this.isResizing = true
document.addEventListener('mousemove', this.resize)
document.addEventListener('mouseup', this.stopResize)
},
resize(e) {
if (!this.isResizing) return
this.topHeight = e.clientY
},
stopResize() {
this.isResizing = false
document.removeEventListener('mousemove', this.resize)
}
}
}
</script>
<style scoped>
.resizable-container {
height: 100vh;
position: relative;
}
.top-panel {
background: #f0f0f0;
overflow: auto;
}
.bottom-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 200px;
background: #e0e0e0;
}
.divider {
height: 5px;
background: #ccc;
cursor: row-resize;
}
</style>注意事项
- 确保父容器有明确的高度设置，否则分栏可能无法正确显示
- 考虑添加 overflow 属性处理内容溢出的情况
- 响应式设计可以通过媒体查询调整分栏比例
- 复杂场景可考虑使用第三方布局库如 Split.js
以上方法可根据具体需求选择使用，Flexbox 和 Grid 方案较为现代且推荐使用，百分比方案简单直接，可调整分栏方案提供更好的用户体验。
