当前位置：首页 > VUE

vue 实现页面分栏

2026-01-19 10:56:43VUE

使用 CSS Grid 布局实现分栏

通过 CSS Grid 可以快速实现分栏布局。在 Vue 模板中定义网格容器，设置 grid-template-columns 控制栏数和宽度比例。

<template>
  <div class="grid-container">
    <div class="left-column">左侧内容</div>
    <div class="right-column">右侧内容</div>
  </div>
</template>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 左右比例 1:2 */
  gap: 16px; /* 栏间距 */
}
</style>

使用 Flexbox 实现动态分栏

Flexbox 适合需要动态调整的分栏场景。通过 flex 属性控制各栏的伸缩比例。

vue 实现页面分栏

<template>
  <div class="flex-container">
    <div class="sidebar" :style="{ width: sidebarWidth + 'px' }">侧边栏</div>
    <div class="main-content">主内容区</div>
  </div>
</template>

<script>
export default {
  data() {
    return { sidebarWidth: 200 }
  }
}
</script>

<style scoped>
.flex-container {
  display: flex;
}
.sidebar {
  flex-shrink: 0; /* 禁止收缩 */
}
.main-content {
  flex-grow: 1; /* 自动填充剩余空间 */
}
</style>

响应式分栏设计

结合媒体查询实现移动端和桌面端的不同分栏表现：

vue 实现页面分栏

/* 桌面端两栏布局 */
@media (min-width: 768px) {
  .responsive-container {
    display: grid;
    grid-template-columns: 250px 1fr;
  }
}

/* 移动端单栏堆叠 */
@media (max-width: 767px) {
  .responsive-container {
    display: block;
  }
}

可拖拽调整的分栏实现

通过 vue-draggable 或原生拖拽 API 实现栏宽调整功能：

<template>
  <div class="draggable-container">
    <div class="left-panel" :style="{ width: leftWidth + 'px' }"></div>
    <div 
      class="divider"
      @mousedown="startDrag"
    ></div>
    <div class="right-panel"></div>
  </div>
</template>

<script>
export default {
  data() {
    return { leftWidth: 300, isDragging: false }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      document.addEventListener('mousemove', this.handleDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    handleDrag(e) {
      if (this.isDragging) {
        this.leftWidth = e.clientX
      }
    },
    stopDrag() {
      this.isDragging = false
    }
  }
}
</script>

<style>
.draggable-container {
  display: flex;
  height: 100vh;
}
.divider {
  width: 8px;
  background: #ddd;
  cursor: col-resize;
}
</style>

基于组件的分栏封装

创建可复用的分栏组件，通过插槽分配内容区域：

<!-- SplitPane.vue -->
<template>
  <div class="split-pane">
    <div class="pane left-pane">
      <slot name="left"></slot>
    </div>
    <div class="pane right-pane">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<!-- 使用示例 -->
<SplitPane>
  <template #left>
    <Navigation/>
  </template>
  <template #right>
    <MainContent/>
  </template>
</SplitPane>