当前位置：首页 > VUE

vue实现左右拉伸

2026-03-28 04:13:01VUE

实现左右拉伸布局的方法

在Vue中实现左右拉伸布局，可以通过CSS的flex布局或grid布局结合Vue的响应式特性完成。以下是两种常见实现方式：

使用flex布局实现

创建父容器设置为display: flex，左右子元素分别设置固定宽度和自动拉伸：

<template>
  <div class="container">
    <div class="left-sidebar">左侧边栏</div>
    <div class="main-content">主内容区</div>
    <div class="right-sidebar">右侧边栏</div>
  </div>
</template>

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

使用CSS grid布局

通过grid-template-columns定义列宽，结合resize属性实现拖拽调整：

<template>
  <div class="grid-container">
    <div class="grid-left">左侧区域</div>
    <div class="grid-main">主区域</div>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
}
.grid-left {
  width: 200px;
  background: #eaeaea;
  resize: horizontal;
  overflow: hidden;
}
.grid-main {
  background: #fff;
}
</style>

添加拖拽交互功能

对于更复杂的拖拽需求，可以使用Vue指令实现：

<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);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
}
</script>

<style>
.drag-container {
  display: flex;
  height: 100vh;
}
.drag-divider {
  width: 5px;
  background: #ddd;
  cursor: col-resize;
}
.drag-left {
  width: 200px;
  background: #f5f5f5;
}
.drag-right {
  flex: 1;
  background: #fff;
}
</style>