当前位置：首页 > VUE

vue实现左右拉伸

2026-02-10 18:16:03VUE

实现左右拉伸布局的方法

在Vue中实现左右拉伸布局通常涉及CSS的弹性布局（Flexbox）或网格布局（Grid），结合Vue的响应式特性。以下是几种常见实现方式：

使用Flexbox布局

通过CSS的display: flex实现左右分栏，并允许拖动调整宽度。

<template>
  <div class="container">
    <div class="left-panel" ref="leftPanel" :style="{ width: leftWidth + 'px' }">
      左侧内容
    </div>
    <div class="divider" @mousedown="startDrag"></div>
    <div class="right-panel">
      右侧内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: 200,
      isDragging: false
    };
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(e) {
      if (this.isDragging) {
        this.leftWidth = e.clientX;
      }
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
};
</script>

<style>
.container {
  display: flex;
  height: 100vh;
}
.left-panel {
  background: #f0f0f0;
  min-width: 100px;
  max-width: 80%;
}
.divider {
  width: 5px;
  background: #ddd;
  cursor: col-resize;
}
.right-panel {
  flex: 1;
  background: #fff;
}
</style>

使用Vue组件库

若需快速实现，可借助第三方库如vue-splitpanes：

npm install vue-splitpanes

<template>
  <splitpanes>
    <pane min-size="20">左侧内容</pane>
    <pane>右侧内容</pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'vue-splitpanes';
export default {
  components: { Splitpanes, Pane }
};
</script>

<style>
@import 'vue-splitpanes/dist/vue-splitpanes.css';
</style>

使用CSS Grid布局

通过网格布局实现动态调整列宽：

vue实现左右拉伸

<template>
  <div class="grid-container" ref="container">
    <div class="left" :style="{ gridTemplateColumns: `${leftWidth}px 5px auto` }">
      <div>左侧内容</div>
      <div class="divider" @mousedown="startDrag"></div>
      <div>右侧内容</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftWidth: 200
    };
  },
  methods: {
    startDrag(e) {
      const moveHandler = (e) => {
        this.leftWidth = e.clientX;
      };
      const upHandler = () => {
        document.removeEventListener('mousemove', moveHandler);
      };
      document.addEventListener('mousemove', moveHandler);
      document.addEventListener('mouseup', upHandler);
    }
  }
};
</script>

<style>
.grid-container {
  height: 100vh;
}
.left {
  display: grid;
  height: 100%;
}
.divider {
  background: #ddd;
  cursor: col-resize;
}
</style>