vue 一个div 上下布局，上面得div可以按住鼠标往下拉改变上下得高度

Vue 中实现一个可以响应鼠标的div元素，使其上面的div随着鼠标拖动而动态调整高度，通常会利用JavaScript的事件处理和DOM操作结合CSS的position和transform属性来完成。这里简单说明一下步骤：

1. 首先，在HTML结构上，创建两个div，一个是作为主容器，另一个是需要可滚动的内容部分。

<div class="container">
  <div class="scrollable-content" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="dragging">
    <!-- 内容 -->
  </div>
</div>

2. 在Vue组件的script部分，定义相关的data和methods：

export default {
  data() {
    return {
      dragOffset: 0,
    };
  },
  methods: {
    startDrag(e) {
      this.dragOffset = e.clientY - this.$refs.scrollableContent.offsetTop;
      document.addEventListener('mousemove', this.dragging);
    },
    stopDrag() {
      document.removeEventListener('mousemove', this.dragging);
    },
    dragging(e) {
      const newHeight = e.clientY - this.dragOffset;
      this.$refs.scrollableContent.style.height = `${newHeight}px`;
    },
  },
};

3. 使用`ref`属性将内容区域绑定到Vue实例上：

<template>
  <div class="container">
    <div ref="scrollableContent" class="scrollable-content"></div>
  </div>
</template>

4. CSS样式设置，保证内容区有垂直滚动条，并限制其最大高度：

.scrollable-content {
  position: relative;
  overflow-y: auto;
  max-height: calc(100% - var(--header-height)); /* --header-height是上面div的高度 */
}

当用户按下鼠标并移动时，`startDrag`方法会被触发，记录初始偏移量。然后在`dragging`方法中，根据当前鼠标位置减去初始偏移，计算新的高度值并应用给内容区域。松开鼠标时，`stopDrag`方法移除事件监听。