Vue 50 行代码实现可拖拽调节分割布局：极致简洁！

2023-09-25 09:55:44

创建可拖拽调节的分隔布局：简洁优雅的 50 行 Vue 代码

实现一个可拖拽调节的分隔布局是一项常见任务，但一些网络文章却将简单的概念复杂化了。本文将揭开这个看似艰巨的挑战，分享一种极致简洁的方法，仅需 50 行 Vue 代码即可实现！

剖析背后的机制

分隔布局的基本原理是：当鼠标悬停在分隔线上方时，光标变为可调整大小的形状，表明可以拖拽。当鼠标按下时，记录下当前鼠标位置和分隔条宽度，然后在鼠标移动时实时调整宽度。

简洁高效的 Vue 代码

<template>
  <div class="split-container">
    <div class="split-p" @mousedown="startDragging">分割条</div>
    <div class="split-pane">左边</div>
    <div class="split-pane">右边</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      triggerDragging: false,
      startClientX: 0,
      elemWidth: 0,
    };
  },
  methods: {
    startDragging(e) {
      this.triggerDragging = true;
      this.startClientX = e.clientX;
      this.elemWidth = e.target.offsetWidth;
    },
    dragging(e) {
      if (this.triggerDragging) {
        const diff = e.clientX - this.startClientX;
        this.elemWidth += diff;
        this.startClientX = e.clientX;
      }
    },
    endDragging() {
      this.triggerDragging = false;
    },
  },
};
</script>

代码拆解

鼠标悬停样式： 当鼠标悬停在分隔线上方时，split-p 获得 cursor: col-resize 样式，表明可进行拖拽。
鼠标按下触发： startDragging 函数在鼠标按下时触发，记录当前鼠标 X 坐标和分隔条宽度。
鼠标移动调整： dragging 函数在鼠标移动时执行，如果 triggerDragging 为 true，则根据鼠标移动距离调整分隔条宽度。
鼠标松开结束： endDragging 函数在鼠标松开时触发，设置 triggerDragging 为 false，结束拖拽操作。

享受极致简洁

使用这种方法，仅需短短 50 行 Vue 代码，即可轻松实现可拖拽调节的分隔布局。它直观易用，大幅简化了开发过程，让您专注于核心业务逻辑。

常见问题解答

如何限制分隔条的最小和最大宽度？ 在 startDragging 函数中添加 Math.max(min, Math.min(max, e.target.offsetWidth + diff))，其中 min 和 max 为设置的最小和最大宽度。
如何实现对齐网格？ 在 dragging 函数中添加 Math.round(diff / gridSize) * gridSize，其中 gridSize 为网格单元格大小。
如何响应键盘事件？ 在 methods 中添加 keydown 事件监听器，使用键盘快捷键调整分隔条宽度。
如何在多个分隔布局之间分配空间？ 使用 resizeObserver 监视分隔条大小变化，动态调整其他分隔条宽度。
如何添加拖拽手柄？ 在 split-p 中添加一个手柄元素，用于拖拽操作，并设置 @mousedown 事件监听器。