vue中实现上下分割

实现上下分割布局

在Vue中实现上下分割布局可以通过多种方式完成，以下是几种常见方法：

使用CSS 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>

使用CSS Grid布局

<template>
  <div class="grid-container">
    <div class="header">上部内容</div>
    <div class="content">下部内容</div>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
}

.header {
  background-color: #f5f5f5;
}

.content {
  background-color: #e5e5e5;
}
</style>

可调整大小的分割布局

如果需要用户可以拖动调整上下部分比例，可以使用splitpanes组件：

安装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" style="height: 200px">固定高度上部</div>
    <div class="fixed-bottom">剩余高度下部</div>
  </div>
</template>

<style>
.fixed-split {
  height: 100vh;
}

.fixed-top {
  background-color: #f8f8f8;
}

.fixed-bottom {
  height: calc(100vh - 200px);
  background-color: #e8e8e8;
}
</style>

响应式分割布局

添加响应式设计，在不同屏幕尺寸下调整布局：

<template>
  <div class="responsive-split">
    <div class="responsive-top">响应式上部</div>
    <div class="responsive-bottom">响应式下部</div>
  </div>
</template>

<style>
.responsive-split {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.responsive-top {
  flex: 1;
  min-height: 100px;
  background-color: #f9f9f9;
}

.responsive-bottom {
  flex: 2;
  min-height: 100px;
  background-color: #e9e9e9;
}

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

  .responsive-top,
  .responsive-bottom {
    flex: 1;
  }
}
</style>

这些方法提供了从简单到复杂的上下分割布局实现方案，可以根据具体需求选择最适合的方式。