vue 实现左右分栏

实现左右分栏的基本方法

使用Vue实现左右分栏布局可以通过多种方式完成，包括Flexbox、Grid或第三方组件库。以下是几种常见方法：

Flexbox布局

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

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

CSS Grid布局

<template>
  <div class="grid-container">
    <div class="sidebar">左侧导航</div>
    <div class="content">主区域</div>
  </div>
</template>

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

可拖拽调整分栏宽度

实现可拖拽调整的左右分栏需要添加拖拽事件处理：

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

<script>
export default {
  data() {
    return {
      leftWidth: 200,
      isResizing: false
    }
  },
  methods: {
    startResize(e) {
      this.isResizing = true
      document.addEventListener('mousemove', this.handleResize)
      document.addEventListener('mouseup', this.stopResize)
    },
    handleResize(e) {
      if (this.isResizing) {
        this.leftWidth = e.clientX
      }
    },
    stopResize() {
      this.isResizing = false
      document.removeEventListener('mousemove', this.handleResize)
      document.removeEventListener('mouseup', this.stopResize)
    }
  }
}
</script>

<style>
.resizable-container {
  display: flex;
  height: 100vh;
}
.left-panel {
  background: #f5f5f5;
}
.resize-handle {
  width: 8px;
  background: #ddd;
  cursor: col-resize;
}
.right-panel {
  flex: 1;
  background: #fff;
}
</style>

使用第三方组件库

Element UI或Ant Design Vue等库提供了现成的分割面板组件：

Element UI示例

<template>
  <el-split v-model="splitRatio">
    <template #left>
      <div>左侧内容</div>
    </template>
    <template #right>
      <div>右侧内容</div>
    </template>
  </el-split>
</template>

<script>
export default {
  data() {
    return {
      splitRatio: 0.3
    }
  }
}
</script>

Ant Design Vue示例

<template>
  <a-split v-model:value="splitValue" style="height: 300px">
    <template #first>
      <div>左侧面板</div>
    </template>
    <template #second>
      <div>右侧面板</div>
    </template>
  </a-split>
</template>

<script>
export default {
  data() {
    return {
      splitValue: 0.5
    }
  }
}
</script>

响应式分栏设计

添加响应式处理，使分栏在小屏幕下变为垂直布局：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .left-sidebar {
    width: 100%;
    height: 100px;
  }
}