当前位置：首页 > VUE

vue 实现页面分栏

2026-02-20 03:17:48VUE

使用 CSS Grid 实现分栏布局

在 Vue 中可以通过 CSS Grid 快速实现分栏布局。定义一个包含多列的网格容器，通过 grid-template-columns 设置列宽比例。

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

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

使用 Flexbox 实现动态分栏

Flexbox 适合需要动态调整的分栏布局，通过 flex 属性控制各栏宽度。

<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>
.flex-container {
  display: flex;
}
.sidebar {
  flex-shrink: 0;
  background: #f0f0f0;
}
.main-content {
  flex-grow: 1;
}
</style>

响应式分栏切换

结合媒体查询实现移动端折叠为单栏布局。

/* 桌面端两栏布局 */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
}

/* 移动端单栏布局 */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

使用第三方组件库

Element UI 或 Ant Design Vue 等库提供现成的分栏组件：

<template>
  <a-layout>
    <a-layout-sider width="200px">侧边栏</a-layout-sider>
    <a-layout-content>主内容</a-layout-content>
  </a-layout>
</template>

带拖拽调整的分栏实现

通过 vue-draggable 等库实现可调整的分栏宽度：

<template>
  <div class="resizable-layout">
    <div class="left-pane" ref="leftPane">左面板</div>
    <div class="divider" @mousedown="startDrag"></div>
    <div class="right-pane">右面板</div>
  </div>
</template>

<script>
export default {
  methods: {
    startDrag(e) {
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    onDrag(e) {
      this.$refs.leftPane.style.width = e.clientX + 'px'
    }
  }
}
</script>

vue 实现页面分栏