vue实现边框高度拖动

Vue 实现边框高度拖动

实现边框高度拖动的功能通常涉及监听鼠标事件并动态调整元素的高度。以下是实现步骤：

创建可拖动边框的组件

在 Vue 中创建一个组件，包含一个可拖动的边框和内容区域。边框可以是水平或垂直的，拖动时调整相邻区域的高度或宽度。

<template>
  <div class="resizable-container">
    <div class="top-pane" :style="{ height: topHeight + 'px' }">
      <!-- 顶部内容区域 -->
    </div>
    <div 
      class="resizer" 
      @mousedown="startResize"
    ></div>
    <div class="bottom-pane" :style="{ height: bottomHeight + 'px' }">
      <!-- 底部内容区域 -->
    </div>
  </div>
</template>

处理鼠标事件

在组件中定义方法，处理鼠标按下、移动和释放事件，动态调整区域高度。

<script>
export default {
  data() {
    return {
      topHeight: 200,
      bottomHeight: 200,
      isResizing: false,
      startY: 0
    };
  },
  methods: {
    startResize(e) {
      this.isResizing = true;
      this.startY = e.clientY;
      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stopResize);
    },
    resize(e) {
      if (!this.isResizing) return;
      const dy = e.clientY - this.startY;
      this.topHeight += dy;
      this.bottomHeight -= dy;
      this.startY = e.clientY;
    },
    stopResize() {
      this.isResizing = false;
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('mouseup', this.stopResize);
    }
  }
};
</script>

添加样式

为组件添加样式，确保边框可拖动且视觉效果明显。

<style>
.resizable-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.top-pane, .bottom-pane {
  overflow: hidden;
}

.resizer {
  height: 5px;
  background-color: #ccc;
  cursor: row-resize;
}

.resizer:hover {
  background-color: #999;
}
</style>

优化拖动体验

为防止拖动时文本被选中或页面滚动，可以添加额外的样式和逻辑。

methods: {
  startResize(e) {
    this.isResizing = true;
    this.startY = e.clientY;
    document.body.style.userSelect = 'none'; // 防止文本选中
    document.addEventListener('mousemove', this.resize);
    document.addEventListener('mouseup', this.stopResize);
  },
  stopResize() {
    this.isResizing = false;
    document.body.style.userSelect = '';
    document.removeEventListener('mousemove', this.resize);
    document.removeEventListener('mouseup', this.stopResize);
  }
}

支持双向绑定

如果需要通过父组件控制高度，可以使用 v-model 或 props 和 $emit。

props: {
  initialTopHeight: {
    type: Number,
    default: 200
  }
},
data() {
  return {
    topHeight: this.initialTopHeight,
    bottomHeight: 400 - this.initialTopHeight
  };
},
watch: {
  topHeight(newVal) {
    this.$emit('update:topHeight', newVal);
  }
}

完整示例

以下是一个完整的 Vue 单文件组件示例：

<template>
  <div class="resizable-container">
    <div class="top-pane" :style="{ height: topHeight + 'px' }">
      <p>顶部区域，高度: {{ topHeight }}px</p>
    </div>
    <div 
      class="resizer" 
      @mousedown="startResize"
    ></div>
    <div class="bottom-pane" :style="{ height: bottomHeight + 'px' }">
      <p>底部区域，高度: {{ bottomHeight }}px</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topHeight: 200,
      bottomHeight: 200,
      isResizing: false,
      startY: 0
    };
  },
  methods: {
    startResize(e) {
      this.isResizing = true;
      this.startY = e.clientY;
      document.body.style.userSelect = 'none';
      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stopResize);
    },
    resize(e) {
      if (!this.isResizing) return;
      const dy = e.clientY - this.startY;
      this.topHeight += dy;
      this.bottomHeight -= dy;
      this.startY = e.clientY;
    },
    stopResize() {
      this.isResizing = false;
      document.body.style.userSelect = '';
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('mouseup', this.stopResize);
    }
  }
};
</script>

<style>
.resizable-container {
  display: flex;
  flex-direction: column;
  height: 400px;
  border: 1px solid #ddd;
}

.top-pane, .bottom-pane {
  overflow: auto;
  padding: 10px;
}

.resizer {
  height: 5px;
  background-color: #ccc;
  cursor: row-resize;
}

.resizer:hover {
  background-color: #999;
}
</style>

通过以上步骤，可以实现一个简单的边框高度拖动功能。根据需求，可以进一步扩展为支持多个区域、横向拖动或更复杂的布局。