实现上下两栏分屏,中间横线可调节两个的高度

<template>
  <div class="splitter-container" @mouseleave="resetResize">
    <div class="pane" :style="{ height: topHeight + 'px' }"></div>
    <div class="divider" @mousedown="startResize"></div>
    <div class="pane2">
      <div style="width: 100%;height: 300px;background: #eee;">
        wewe
      </div>
      rrr
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topHeight: 100, // 默认上栏高度
      initialPosition: 0,
      initialTopHeight: 0,
      resizeTimeout: null,
    };
  },
  methods: {
    startResize(event) {
      event.preventDefault();
      this.initialPosition = event.clientY;
      this.initialTopHeight = this.topHeight;
      window.addEventListener('mousemove', this.resize);
      window.addEventListener('mouseup', this.stopResize);
      window.addEventListener('mouseleave', this.stopResize); // 添加鼠标离开事件
    },
    resize(event) {
      if (this.resizeTimeout) {
        clearTimeout(this.resizeTimeout);
      }
      this.resizeTimeout = setTimeout(() => {
        const delta = event.clientY - this.initialPosition;
        // this.topHeight = Math.min(Math.max(this.initialTopHeight + delta, 100), 300); // 确保高度在100-300之间
        this.topHeight = this.initialTopHeight + delta
        this.resizeTimeout = null;
      }, 10); // 防抖时间设置为10ms,
    },
    stopResize() {
      window.removeEventListener('mousemove', this.resize);
      window.removeEventListener('mouseup', this.stopResize);
      window.removeEventListener('mouseleave', this.stopResize); // 移除鼠标离开事件
    },
    resetResize() {
      // 如果用户在鼠标离开时正在调整大小,清除防抖定时器
      if (this.resizeTimeout) {
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = null;
      }
    },
  },
  beforeUnmount() {
    // 在组件卸载前清除所有事件监听器和定时器
    if (this.resizeTimeout) {
      clearTimeout(this.resizeTimeout);
    }
    window.removeEventListener('mousemove', this.resize);
    window.removeEventListener('mouseup', this.stopResize);
    window.removeEventListener('mouseleave', this.stopResize);
  },
};
</script>

<style>
.splitter-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100px);
  /* 容器高度 */
}

.pane {
  overflow: auto;
  background: red;
}

.pane2 {
  flex: 1;
  background: cyan;
  overflow: auto;
}

.divider {
  width: 100%;
  height: 40px;
  background-color: #ccc;
  cursor: ns-resize;
  position: relative;
}
</style>

其实就是colum布局,一直在调整上面的布局,下面的布局占据剩余部分,下面布局中子元素样式随便写,都可以滚动,还可以设置,上面布局的最小高度和最大高度

效果图

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-10 07:46:03       4 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-10 07:46:03       5 阅读
  3. 在Django里面运行非项目文件

    2024-07-10 07:46:03       4 阅读
  4. Python语言-面向对象

    2024-07-10 07:46:03       4 阅读

热门阅读

  1. DOM XMLHttpRequest

    2024-07-10 07:46:03       8 阅读
  2. nginx详解

    2024-07-10 07:46:03       6 阅读
  3. vue实现表单输入框数字类型校验功能

    2024-07-10 07:46:03       9 阅读
  4. 【数据基础】— 基于Go1.19的站点模板爬虫的实现

    2024-07-10 07:46:03       11 阅读
  5. Perl 语言入门学习

    2024-07-10 07:46:03       11 阅读
  6. perl语言入门学习

    2024-07-10 07:46:03       12 阅读
  7. Apache Spark 的基本概念和在大数据分析中的应用

    2024-07-10 07:46:03       13 阅读
  8. CSS 下拉菜单的设计与实现

    2024-07-10 07:46:03       11 阅读
  9. 快速排序算法Python实现

    2024-07-10 07:46:03       8 阅读
  10. python爬虫入门(二)之Requests库

    2024-07-10 07:46:03       7 阅读