vue实现左右分栏布局

使用Flexbox实现左右分栏

通过Flexbox可以快速实现左右分栏布局。在Vue组件的模板中创建两个div，分别代表左右栏，并通过CSS的flex属性控制布局。

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

<style scoped>
.container {
  display: flex;
  height: 100vh;
}
.left-sidebar {
  width: 200px;
  background-color: #f0f0f0;
}
.right-content {
  flex: 1;
  background-color: #ffffff;
}
</style>

使用Grid布局实现分栏

CSS Grid布局提供了更灵活的列控制方式，适合需要精确控制列宽的场景。

<template>
  <div class="grid-container">
    <div class="sidebar">左侧导航</div>
    <div class="main">主内容区</div>
  </div>
</template>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100vh;
}
.sidebar {
  background-color: #eaeaea;
}
.main {
  background-color: #fff;
}
</style>

响应式分栏设计

结合媒体查询实现响应式布局，当屏幕尺寸较小时自动切换为上下布局。

<template>
  <div class="responsive-container">
    <aside>侧边栏</aside>
    <main>主要内容</main>
  </div>
</template>

<style scoped>
.responsive-container {
  display: flex;
  flex-direction: row;
}
aside {
  width: 250px;
  min-height: 100vh;
  background: #f5f5f5;
}
main {
  flex: 1;
}

@media (max-width: 768px) {
  .responsive-container {
    flex-direction: column;
  }
  aside {
    width: 100%;
    min-height: auto;
  }
}
</style>

带拖拽调整的分栏布局

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

<template>
  <div class="drag-container">
    <div class="left-panel" :style="{width: leftWidth + 'px'}">
      左侧面板
    </div>
    <div class="drag-bar" @mousedown="startDrag"></div>
    <div class="right-panel">
      右侧面板
    </div>
  </div>
</template>

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

<style scoped>
.drag-container {
  display: flex;
  height: 100vh;
}
.left-panel {
  background: #f0f0f0;
}
.drag-bar {
  width: 5px;
  background: #ccc;
  cursor: col-resize;
}
.right-panel {
  flex: 1;
  background: #fff;
}
</style>

使用第三方组件库实现

Element UI等流行组件库提供了现成的分栏组件，可以快速集成。

<template>
  <el-container style="height: 100vh">
    <el-aside width="200px">侧边栏</el-aside>
    <el-container>
      <el-header>头部</el-header>
      <el-main>主内容</el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ElContainer, ElAside, ElHeader, ElMain } from 'element-plus'
export default {
  components: {
    ElContainer,
    ElAside,
    ElHeader,
    ElMain
  }
}
</script>

每种方法适用于不同场景，Flexbox适合简单布局，Grid适合复杂网格，响应式设计适配移动端，拖拽功能增强用户体验，第三方组件库则提供开箱即用的解决方案。