当前位置：首页 > VUE

vue实现分栏

2026-01-07 22:25:27VUE

Vue实现分栏的常见方法

使用CSS Flexbox布局

通过Flexbox可以快速实现分栏效果，适合大多数响应式布局场景

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

<style>
.container {
  display: flex;
  gap: 20px; /* 列间距 */
}
.left-column {
  flex: 1; /* 占据剩余空间比例 */
}
.right-column {
  flex: 1;
}
</style>

使用CSS Grid布局

Grid布局更适合复杂的多栏布局系统

<template>
  <div class="grid-container">
    <div class="item1">栏目1</div>
    <div class="item2">栏目2</div>
    <div class="item3">栏目3</div>
  </div>
</template>

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

使用Vue组件化实现

将分栏封装为可复用的组件

<template>
  <SplitPane :split="30">
    <template #left>
      <LeftContent />
    </template>
    <template #right>
      <RightContent />
    </template>
  </SplitPane>
</template>

<script>
import SplitPane from './SplitPane.vue'
import LeftContent from './LeftContent.vue'
import RightContent from './RightContent.vue'

export default {
  components: { SplitPane, LeftContent, RightContent }
}
</script>

使用第三方库

如vue-splitpane等现成解决方案

npm install vue-splitpane

<template>
  <splitpanes>
    <pane>左侧面板</pane>
    <pane>右侧面板</pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

export default {
  components: { Splitpanes, Pane }
}
</script>

响应式分栏处理

添加媒体查询实现不同屏幕尺寸下的分栏变化

.container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

可拖拽调整的分栏

结合拖拽库实现栏宽调整功能

<template>
  <div class="resizable-container">
    <div class="resizable-left" ref="leftPane">
      可调整宽度的左侧栏
    </div>
    <div class="resizer" @mousedown="startResize"></div>
    <div class="resizable-right">
      右侧内容区域
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    startResize(e) {
      window.addEventListener('mousemove', this.resize)
      window.addEventListener('mouseup', this.stopResize)
    },
    resize(e) {
      this.$refs.leftPane.style.width = e.clientX + 'px'
    },
    stopResize() {
      window.removeEventListener('mousemove', this.resize)
    }
  }
}
</script>

vue实现分栏