当前位置：首页 > VUE

vue实现页面分栏

2026-01-19 02:44:23VUE

Vue 实现页面分栏的方法

使用 CSS Flexbox 布局

通过 CSS Flexbox 可以快速实现分栏布局，适用于大多数现代浏览器。

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

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

使用 CSS Grid 布局

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

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

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  gap: 10px;
}
.grid-left {
  background-color: #f0f0f0;
  padding: 20px;
}
.grid-right {
  background-color: #e0e0e0;
  padding: 20px;
}
</style>

使用第三方组件库

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

<template>
  <el-row>
    <el-col :span="12">左侧内容</el-col>
    <el-col :span="12">右侧内容</el-col>
  </el-row>
</template>

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

响应式分栏布局

结合媒体查询实现响应式分栏，在不同屏幕尺寸下显示不同布局。

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

<style scoped>
.responsive-container {
  display: flex;
  flex-direction: column;
}
.responsive-left, .responsive-right {
  padding: 20px;
}
@media (min-width: 768px) {
  .responsive-container {
    flex-direction: row;
  }
  .responsive-left, .responsive-right {
    flex: 1;
  }
}
</style>

可拖拽调整的分栏

实现可拖拽调整宽度的分栏，提升用户体验。

<template>
  <div class="drag-container">
    <div class="drag-left" ref="leftPanel">左侧内容</div>
    <div class="drag-divider" @mousedown="startDrag"></div>
    <div class="drag-right">右侧内容</div>
  </div>
</template>

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

<style scoped>
.drag-container {
  display: flex;
  height: 100vh;
}
.drag-left {
  width: 50%;
  background-color: #f0f0f0;
  padding: 20px;
}
.drag-divider {
  width: 5px;
  background-color: #ccc;
  cursor: col-resize;
}
.drag-right {
  flex: 1;
  background-color: #e0e0e0;
  padding: 20px;
}
</style>

每种方法适用于不同场景，可根据项目需求选择最合适的实现方式。Flexbox 和 Grid 适合基础分栏，组件库能快速集成，响应式设计适配多设备，拖拽功能增强交互性。

vue实现页面分栏