当前位置：首页 > VUE

vue实现左右拉伸

2026-03-07 18:05:18VUE

实现左右拉伸布局

在Vue中实现左右拉伸布局可以通过CSS Flexbox或Grid结合Vue的响应式数据绑定完成。以下是两种常见方法：

使用Flexbox布局

通过CSS Flexbox实现左右面板可拉伸，中间添加拖拽条控制宽度：

<template>
  <div class="container">
    <div class="left-panel" :style="{ width: leftWidth + 'px' }">
      <!-- 左侧内容 -->
    </div>
    <div 
      class="drag-bar" 
      @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;
}
.drag-bar {
  width: 8px;
  background: #ddd;
  cursor: col-resize;
}
.right-panel {
  flex: 1;
  background: #fff;
}
</style>

使用CSS Grid布局

CSS Grid提供更精确的列控制，适合复杂布局：

<template>
  <div 
    class="grid-container"
    :style="{
      'grid-template-columns': `${leftWidth}px 8px 1fr`
    }"
  >
    <div class="left">
      <!-- 左侧内容 -->
    </div>
    <div 
      class="divider"
      @mousedown="startDrag"
    ></div>
    <div class="right">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

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

注意事项

拖拽过程中添加user-select: none防止文本选中
移动端需要额外处理触摸事件
可添加min-width和max-width限制拉伸范围
性能优化可考虑节流处理mousemove事件

扩展方案

对于需要保存布局状态的场景，可将宽度值存入localStorage或通过Vuex管理：

vue实现左右拉伸

// 在created钩子中恢复宽度
created() {
  const savedWidth = localStorage.getItem('leftPanelWidth')
  if (savedWidth) this.leftWidth = Number(savedWidth)
},
// 在拖拽结束时保存
stopDrag() {
  localStorage.setItem('leftPanelWidth', this.leftWidth)
}

标签: vue