拖动改变宽度自适应布局,左右两块区域

最新推荐文章于 2024-08-29 19:36:49 发布

一枕槐安1

最新推荐文章于 2024-08-29 19:36:49 发布

阅读量63

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_64770583/article/details/141681292

版权

<template>
  <div class="app-container">
    <div class="drag-layout">
      <div class="left-panel" :style="{ width: leftWidth + 'px' }">
        <!-- 左侧 -->
        <div style="height: 85vh;">
          左侧显示区域
        </div>
      </div>
      <div class="resizer" @mousedown="startDrag" />
      <div class="right-panel">
        右侧显示区域
      </div>
    </div>
  </div>
</template>

<script setup>

//#region 拖拽改变宽度
const leftWidth = ref(400); // 初始左侧区域宽度
let initialX = 0;
let initialWidth = 0;
let resizer = null;

const startDrag = (e) => {
  // 记录拖拽条的 DOM 元素
  resizer = e.target;
  // 记录鼠标初始位置和宽度初始值
  initialX = e.clientX;
  initialWidth = leftWidth.value;

  // 监听鼠标移动和松开事件
  window.addEventListener('mousemove', whileDragging);
  window.addEventListener('mouseup', endDrag);
};

const whileDragging = (e) => {
  // 计算鼠标移动的距离，并更新左侧区域的宽度
  const x = e.clientX - initialX;
  if (initialWidth + x > 900) {
    leftWidth.value = 900
  } else if (initialWidth + x < 400) {
    leftWidth.value = 400
  } else {
    leftWidth.value = initialWidth + x;
  }
};

const endDrag = () => {
  // 清理鼠标移动和松开事件监听器
  window.removeEventListener('mousemove', whileDragging);
  window.removeEventListener('mouseup', endDrag);
  resizer = null;
};
//#endregion

</script>

<style lang="scss" scoped>
.drag-layout {
  display: flex;
  width: 100%;
  height: 100%;

  /* 根据需要调整高度 */
  .right-panel {
    flex-grow: 1;
  }

  .resizer {
    width: 8px;
    background-color: #ccc;
    cursor: col-resize;
    margin: 0 10px;
  }
}

.menuTop {
  margin-bottom: 20px;
}

.reality {
  display: flex;

  .reality-select {
    flex: 1;
    margin-right: 10px
  }
}
</style>