实现div高度自动调节

将拖拽逻辑提取到一个独立的 JavaScript 文件中，并在 Vue 组件中使用它，你可以按照以下步骤进行：

1. 创建一个单独的 JavaScript 文件：在你的项目中创建一个新的文件，比如 resizeHandler.js。

2. 将拖拽逻辑写入这个文件：在 resizeHandler.js 中定义一个函数来处理拖拽事件。

3. 在 Vue 组件中导入并使用这个函数。

1. 创建 resizeHandler.js

// resizeHandler.js
export function setupResizeHandler(resizeElement, leftElement, midElement) {
  let startY;
  let startHeight;

  const onMouseDown = (e) => {
    startY = e.clientY;
    startHeight = leftElement.offsetHeight;

    const onMouseMove = (e) => {
      const endY = e.clientY;
      let moveLen = startHeight + (endY - startY);

      if (moveLen < 30) moveLen = 30;

      leftElement.style.height = `${moveLen}px`;
      midElement.style.height = `calc(100% - ${moveLen}px - 5px)`;
    };

    const onMouseUp = () => {
      document.onmousemove = null;
      document.onmouseup = null;
      resizeElement.releaseCapture && resizeElement.releaseCapture();
    };

    document.onmousemove = onMouseMove;
    document.onmouseup = onMouseUp;
    resizeElement.setCapture && resizeElement.setCapture();
    return false;
  };

  resizeElement.onmousedown = onMouseDown;
}

2. 在 Vue 组件中导入并使用这个函数

<template>
  <div class="box" id="box">
    <div v-if="showMid" class="left" ref="left">
      <!-- 上面的div内容 -->
      <p>这里是上面的内容，可以滚动。</p>
      <!-- 更多内容 -->
    </div>
    <div v-if="showResize" id="resize" class="resize" title="收缩侧边栏"></div>
    <div v-if="showMid" class="mid" id="center">
      <!-- 中间div内容 -->
    </div>
    <button @click="toggleMid">显示/隐藏 中间区域</button>
  </div>
</template>

<script>
import { setupResizeHandler } from './resizeHandler'; // 导入处理函数
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['showMid', 'showResize']),
  },
  methods: {
    ...mapMutations(['toggleShowMid']),
    toggleMid() {
      this.toggleShowMid();
    }
  },
  mounted() {
    const resize = this.$refs.resize;
    const left = this.$refs.left;
    const mid = this.$refs.mid;

    if (resize && left && mid) {
      setupResizeHandler(resize, left, mid);
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 防止整个页面滚动 */
}

.box {
  width: 100%;
  height: 100%;
}

.left {
  width: 100%;
  min-height: 300px;
  max-height: 100%; /* 设定最大高度 */
  overflow-y: auto; /* 启用垂直滚动 */
  background: #d6d6d6;
}

.resize {
  cursor: row-resize;
  position: relative;
  background-color: yellow;
  width: 100%;
  height: 5px;
  font-size: 32px;
}

.resize:hover {
  background-color: #444444;
}

.mid {
  width: 100%;
  height: calc(100% - 305px); /* 减去.left的最小高度和resize的高度 */
  background-color: red;
}
</style>

说明

1. resizeHandler.js：定义了一个 setupResizeHandler 函数，该函数接受拖拽元素、左侧元素和中间元素作为参数，处理拖拽逻辑。
2. 在 Vue 组件中：
   • 导入 setupResizeHandler 函数。
   • 在 mounted 钩子中调用 setupResizeHandler 函数，将相关元素传入。

这样，你就将拖拽逻辑分离到了一个独立的文件中，提高了代码的可维护性。如果有其他问题或需要进一步的帮助，请告诉我！