当前位置：首页 > VUE

vue如何实现两栏布局

2026-03-27 05:11:08VUE

使用Flexbox实现两栏布局

通过CSS的Flexbox布局可以快速实现两栏结构。在Vue组件的<style>部分定义Flex容器，子元素按比例分配空间。

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

<style>
.container {
  display: flex;
  height: 100vh;
}
.left-column {
  flex: 1;
  background: #f0f0f0;
}
.right-column {
  flex: 3;
  background: #e0e0e0;
}
</style>

使用Grid布局实现

CSS Grid布局提供更精确的控制，适合复杂的分栏需求。通过grid-template-columns定义列宽比例。

vue如何实现两栏布局

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

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  height: 100vh;
}
.grid-left {
  background: #f5f5f5;
}
.grid-right {
  background: #e5e5e5;
}
</style>

结合Vue动态属性

通过Vue的响应式数据动态控制栏宽比例，实现交互式布局调整。

vue如何实现两栏布局

<template>
  <div class="dynamic-container" :style="{ gridTemplateColumns: `${leftWidth}fr ${rightWidth}fr` }">
    <div>动态左侧</div>
    <div>动态右侧</div>
    <button @click="adjustWidth">调整比例</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: 1,
      rightWidth: 2
    }
  },
  methods: {
    adjustWidth() {
      this.leftWidth = 2;
      this.rightWidth = 3;
    }
  }
}
</script>

<style>
.dynamic-container {
  display: grid;
  height: 100vh;
}
</style>

响应式设计适配

通过媒体查询实现移动端下的布局切换，两栏在窄屏下变为垂直堆叠。

@media (max-width: 768px) {
  .container, .grid-container {
    flex-direction: column;
    grid-template-columns: 1fr;
  }
  .left-column, .right-column {
    flex: none;
    height: 50%;
  }
}

第三方库辅助

使用像vue-grid-layout这类专门库实现可拖拽调整的布局。

npm install vue-grid-layout

<template>
  <grid-layout :layout="layout" :col-num="12">
    <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h">
      {{ item.i }}
    </grid-item>
  </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout'
export default {
  components: { GridLayout, GridItem },
  data() {
    return {
      layout: [
        { x:0, y:0, w:4, h:10, i:'left' },
        { x:4, y:0, w:8, h:10, i:'right' }
      ]
    }
  }
}
</script>