当前位置：首页 > VUE

vue实现左右拉伸

2026-01-08 04:26:23VUE

实现左右拉伸布局的方法

使用CSS Flexbox布局

Flexbox可以轻松实现左右拉伸的效果。通过设置display: flex和flex-grow属性，可以让元素填充可用空间。

<div class="container">
  <div class="left">左侧内容</div>
  <div class="resize-handle"></div>
  <div class="right">右侧内容</div>
</div>

.container {
  display: flex;
  height: 100vh;
}

.left {
  flex-grow: 1;
  background-color: #f0f0f0;
  min-width: 100px;
}

.right {
  flex-grow: 1;
  background-color: #e0e0e0;
  min-width: 100px;
}

.resize-handle {
  width: 10px;
  background-color: #ccc;
  cursor: col-resize;
}

添加拖拽功能

通过监听鼠标事件来实现拖拽调整宽度。

// 在Vue组件的mounted钩子中
mounted() {
  const handle = document.querySelector('.resize-handle');
  const left = document.querySelector('.left');
  const right = document.querySelector('.right');
  let isDragging = false;

  handle.addEventListener('mousedown', (e) => {
    isDragging = true;
    document.body.style.cursor = 'col-resize';
    e.preventDefault();
  });

  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;

    const containerWidth = document.querySelector('.container').offsetWidth;
    const newLeftWidth = e.clientX;
    const newRightWidth = containerWidth - e.clientX - handle.offsetWidth;

    left.style.width = `${newLeftWidth}px`;
    right.style.width = `${newRightWidth}px`;
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
    document.body.style.cursor = '';
  });
}

使用第三方库

可以使用现成的Vue组件如vue-splitter或splitpanes来快速实现。

安装splitpanes：

npm install splitpanes

使用示例：

<template>
  <splitpanes>
    <pane>左侧内容</pane>
    <pane>右侧内容</pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

export default {
  components: { Splitpanes, Pane }
}
</script>

响应式处理

添加窗口大小变化的监听，确保布局适应不同屏幕尺寸。

mounted() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    // 调整左右面板宽度逻辑
  }
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}