当前位置：首页 > VUE

vue实现左右拉伸

2026-01-14 01:35:51VUE

实现左右拉伸布局

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

使用flexbox布局

创建两个容器元素，通过flexbox实现左右拉伸效果：

<template>
  <div class="stretch-container">
    <div class="left-panel" ref="leftPanel">
      <!-- 左侧内容 -->
    </div>
    <div class="resize-handle" @mousedown="startResize"></div>
    <div class="right-panel">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

<style>
.stretch-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

.left-panel {
  flex: 0 0 200px; /* 初始宽度200px */
  background: #f0f0f0;
  overflow: auto;
}

.resize-handle {
  width: 8px;
  background: #ddd;
  cursor: col-resize;
}

.right-panel {
  flex: 1;
  overflow: auto;
}
</style>

添加拖拽功能

实现拖拽调整宽度的交互：

<script>
export default {
  methods: {
    startResize(e) {
      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stopResize);
    },
    resize(e) {
      const container = this.$el.getBoundingClientRect();
      const newWidth = e.clientX - container.left;
      this.$refs.leftPanel.style.width = `${newWidth}px`;
    },
    stopResize() {
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('mouseup', this.stopResize);
    }
  }
}
</script>

使用CSS Grid布局

另一种实现方式是使用CSS Grid：

<template>
  <div class="grid-container">
    <div class="left-grid" :style="{ width: leftWidth + 'px' }">
      <!-- 左侧内容 -->
    </div>
    <div class="resize-handle" @mousedown="startResize"></div>
    <div class="right-grid">
      <!-- 右侧内容 -->
    </div>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-columns: auto 8px 1fr;
  height: 100vh;
}

.left-grid {
  min-width: 100px;
  max-width: 50vw;
}

.right-grid {
  overflow: auto;
}
</style>

响应式数据绑定

结合Vue的数据响应式特性：

<script>
export default {
  data() {
    return {
      leftWidth: 200,
      isResizing: false
    }
  },
  methods: {
    startResize() {
      this.isResizing = true;
      window.addEventListener('mousemove', this.handleResize);
      window.addEventListener('mouseup', this.stopResize);
    },
    handleResize(e) {
      if (this.isResizing) {
        this.leftWidth = Math.max(100, Math.min(e.clientX, window.innerWidth - 100));
      }
    },
    stopResize() {
      this.isResizing = false;
      window.removeEventListener('mousemove', this.handleResize);
      window.removeEventListener('mouseup', this.stopResize);
    }
  }
}
</script>

使用第三方库

考虑使用专门的可调整布局库如split.js：

import Split from 'split.js'

export default {
  mounted() {
    Split(['.left-panel', '.right-panel'], {
      sizes: [30, 70],
      minSize: [100, 100],
      gutterSize: 8,
      cursor: 'col-resize'
    })
  }
}

以上方法都可以实现Vue中的左右拉伸布局，选择哪种取决于项目需求和个人偏好。纯CSS方案轻量但功能有限，JavaScript方案更灵活但代码量稍多，第三方库则提供了开箱即用的解决方案。

vue实现左右拉伸