vue中实现上下分割

实现上下分割布局的方法

在Vue中实现上下分割布局，可以通过CSS的flexbox或grid布局系统来完成。以下是几种常见的实现方式：

使用flexbox布局

<template>
  <div class="split-container">
    <div class="top-section">上部内容</div>
    <div class="bottom-section">下部内容</div>
  </div>
</template>

<style>
.split-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.top-section {
  flex: 1;
  background-color: #f0f0f0;
}
.bottom-section {
  flex: 1;
  background-color: #e0e0e0;
}
</style>

使用grid布局

<template>
  <div class="split-grid">
    <div class="top-grid">上部内容</div>
    <div class="bottom-grid">下部内容</div>
  </div>
</template>

<style>
.split-grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
}
.top-grid {
  background-color: #f0f0f0;
}
.bottom-grid {
  background-color: #e0e0e0;
}
</style>

可调整的分割布局

如果需要用户可以拖动调整分割比例，可以使用vue-splitpanes组件：

npm install splitpanes

<template>
  <splitpanes>
    <pane>上部内容</pane>
    <pane>下部内容</pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

export default {
  components: { Splitpanes, Pane }
}
</script>

固定高度分割布局

如果希望上部固定高度，下部自动填充剩余空间：

<template>
  <div class="fixed-split">
    <div class="fixed-top">固定高度的上部</div>
    <div class="flexible-bottom">自动填充的下部</div>
  </div>
</template>

<style>
.fixed-split {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.fixed-top {
  height: 200px;
  background-color: #f0f0f0;
}
.flexible-bottom {
  flex: 1;
  background-color: #e0e0e0;
}
</style>

响应式分割布局

添加媒体查询使布局在不同屏幕尺寸下表现不同：

@media (max-width: 768px) {
  .split-container {
    flex-direction: row;
  }
}

这些方法可以根据具体需求选择使用，flexbox和grid是现代CSS布局的推荐方案，而splitpanes则提供了更丰富的交互功能。