当前位置：首页 > VUE

vue实现上下分栏

2026-01-19 01:03:22VUE

实现上下分栏的基本结构

在Vue中实现上下分栏布局，可以通过CSS的Flexbox或Grid布局系统完成。以下是一个基础模板示例：

<template>
  <div class="split-layout">
    <div class="top-panel">
      <!-- 上栏内容 -->
    </div>
    <div class="bottom-panel">
      <!-- 下栏内容 -->
    </div>
  </div>
</template>

<style scoped>
.split-layout {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 视口高度 */
}

.top-panel {
  flex: 1; /* 可调整比例 */
  background: #f0f0f0;
}

.bottom-panel {
  flex: 1;
  background: #e0e0e0;
}
</style>

可调整的分栏比例

通过修改flex属性值控制分栏比例。例如7:3的分栏：

.top-panel {
  flex: 7;
}

.bottom-panel {
  flex: 3;
}

固定高度分栏

若需要固定某栏高度（如顶部固定100px）：

.top-panel {
  height: 100px;
  flex: none; /* 禁用flex伸缩 */
}

.bottom-panel {
  flex: 1; /* 剩余空间 */
}

添加分割线交互

实现可拖拽调整分栏大小的功能：

<template>
  <div class="resizable-layout">
    <div class="top-panel" :style="{ height: topHeight + 'px' }">
      <div class="resizer" @mousedown="startResize"></div>
    </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) {
        this.topHeight = e.clientY
      }
    },
    stopResize() {
      this.isResizing = false
      document.removeEventListener('mousemove', this.resize)
    }
  }
}
</script>

<style>
.resizable-layout {
  position: relative;
  height: 100vh;
}

.resizer {
  height: 5px;
  background: #ccc;
  cursor: row-resize;
}
</style>

响应式处理

通过媒体查询适应不同屏幕尺寸：

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

  .top-panel, .bottom-panel {
    flex: none;
    height: auto;
  }
}

使用第三方组件

若需快速实现复杂分栏，可考虑以下库：

vue-split-panel：提供可拖拽调整的分割面板
vue-resizable：支持元素尺寸调整

安装示例：

npm install vue-split-panel

使用方式：

<template>
  <split-panel direction="vertical">
    <div slot="panel-1">上栏</div>
    <div slot="panel-2">下栏</div>
  </split-panel>
</template>

<script>
import { SplitPanel } from 'vue-split-panel'

export default {
  components: { SplitPanel }
}
</script>

vue实现上下分栏