当前位置：首页 > VUE

vue实现分栏

2026-03-07 08:25:54VUE

Vue 实现分栏布局的方法

使用 CSS Flexbox 实现

通过 CSS Flexbox 可以快速实现分栏布局。在 Vue 组件中，直接在模板和样式中定义 Flex 容器和项目。

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

<style>
.flex-container {
  display: flex;
  gap: 20px; /* 设置分栏间距 */
}
.column {
  flex: 1; /* 等分宽度 */
}
</style>

使用 CSS Grid 实现

CSS Grid 提供了更灵活的分栏控制，适合复杂布局场景。

vue实现分栏

<template>
  <div class="grid-container">
    <div class="column">栏1</div>
    <div class="column">栏2</div>
    <div class="column">栏3</div>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三栏等分 */
  gap: 15px;
}
</style>

使用第三方 UI 库

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

Element UI 示例：

vue实现分栏

<template>
  <el-row :gutter="20">
    <el-col :span="12"><div>左侧</div></el-col>
    <el-col :span="12"><div>右侧</div></el-col>
  </el-row>
</template>

<script>
import { ElRow, ElCol } from 'element-plus'
export default {
  components: { ElRow, ElCol }
}
</script>

响应式分栏实现

通过 Vue 的响应式数据和 CSS 媒体查询实现自适应分栏。

<template>
  <div :class="['columns', { 'vertical': isMobile }]">
    <div class="column">内容A</div>
    <div class="column">内容B</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMobile: false
    }
  },
  mounted() {
    this.checkScreen();
    window.addEventListener('resize', this.checkScreen);
  },
  methods: {
    checkScreen() {
      this.isMobile = window.innerWidth < 768;
    }
  }
}
</script>

<style>
.columns {
  display: flex;
}
.column {
  flex: 1;
}
@media (max-width: 768px) {
  .columns.vertical {
    flex-direction: column;
  }
}
</style>

动态分栏宽度控制

通过 Vue 的 v-bind 动态控制分栏宽度比例。

<template>
  <div class="dynamic-columns">
    <div 
      class="column" 
      :style="{ flex: leftRatio }"
      @click="adjustRatio(0.7)"
    >左侧</div>
    <div 
      class="column" 
      :style="{ flex: rightRatio }"
      @click="adjustRatio(0.3)"
    >右侧</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftRatio: '3',
      rightRatio: '1'
    }
  },
  methods: {
    adjustRatio(left) {
      this.leftRatio = left * 10;
      this.rightRatio = (1 - left) * 10;
    }
  }
}
</script>

<style>
.dynamic-columns {
  display: flex;
  height: 300px;
}
.column {
  transition: flex 0.3s;
}
</style>

每种方法适用于不同场景，Flexbox 适合简单等分布局，Grid 适合复杂网格，UI 库适合快速开发，响应式和动态方案适合需要适配不同设备的项目。

标签: vue