有元素调整尺寸的需求，这个小而美的库真的很好用

各位大佬早上好，中午好，晚上好

Split.js 是一个用于创建可拖动分割条的 JavaScript 库。它可以帮助我们轻松实现页面布局中元素的分割和调整大小。

使用场景

如果我们遇到以下业务场景，我们就可以使用这个库：

1. 响应式布局：在需要用户自定义界面布局的网页应用中，Split.js 可以让用户通过拖动来调整不同部分的大小。
2. 代码编辑器：在代码编辑器中，使用 Split.js 可以实现左右或上下分割视图，例如同时显示代码和预览窗口。
3. 数据比较工具：在需要比较两份数据或文件的应用中，Split.js 可用于创建可调整的分割视图。
4. 多面板管理界面：在具有多个面板的管理界面中，用户可以根据自己的需求调整面板大小。
5. 后天管理系统：在后台管理系统中侧边栏可以更具用户需求冬天调整侧边栏sider的大小。

基本使用

���是一个JavaScript库，所以它不绑定任何框架，可以在任何前端框架下使用，以下使用Vue3来示例。

安装

npm install split.js
// or 
yarn add split.js
// or
pnpm add split.js

useSplit.js

我们以实现上面代码在线编辑器的Gif动图来写这个useSplit：

1. 将页面分为上下两部分
2. 上部分和下部分又分为左右两部分

那template应该是这样的：

<div class="absolute-fill">
    <div ref="topPanelRef" class="split">
        // 上部分
      <div class="panel-content" ref="topLeftPanelRef">
          // 上部分 左边panel
      </div>
      <div class="panel-content" ref="topRightPanelRef">
          // 上部分 右边panel
      </div>
    </div>
    <div ref="bottomPanelRef" class="split">
        // 下部分
      <div class="panel-content" ref="bottomLeftPanelRef">
          // 下部分 左边panel
      </div>
      <div class="panel-content" ref="bottomRightPanelRef">
          // 下部分 右边panel
      </div>
    </div>
  </div>

将这部分逻辑放在useSplit里：

import { ref, onMounted } from 'vue';
import Split from 'split.js'

export default function useSplit() {
  onMounted(() => {
    initSplitLayout()
  })

  const topPanelRef = ref(null)
  const bottomPanelRef = ref(null)
  const topLeftPanelRef = ref(null)
  const topRightPanelRef = ref(null)
  const bottomLeftPanelRef = ref(null)
  const bottomRightPanelRef = ref(null)
  function initSplitLayout() {
    Split([topPanelRef.value, bottomPanelRef.value], {
      sizes: [35, 65],
      gutterSize: 8,
      cursor: 'row-resize',
      direction: 'vertical'
    });

    Split([topLeftPanelRef.value, topRightPanelRef.value], {
      sizes: [50, 50],
      gutterSize: 8,
      cursor: 'col-resize'
    });
    Split([bottomLeftPanelRef.value, bottomRightPanelRef.value], {
      sizes: [50, 50],
      gutterSize: 8,
      cursor: 'col-resize'
    });
  }

  return {
    topPanelRef,
    bottomPanelRef,
    topLeftPanelRef,
    topRightPanelRef,
    bottomLeftPanelRef,
    bottomRightPanelRef,
  }
}

1. 首先定义了六个响应式引用，每个引用都与 Vue 组件模板中的 DOM 元素相关联（通过 ref 属性），然后return。
2. 在onMounted中初始化分割
3. 在initSplitLayout中我调用了三次Split函数，分别用于创建三个不同的分割布局：
   • 第一个 Split 调用创建了垂直方向的分割，将 topPanelRef 和 bottomPanelRef 分割为上下两部分，比例为 35:65。
   • 第二个和第三个 Split 调用创建了水平方向的分割，分别将 topPanelRef 和 bottomPanelRef 再次分割为左右两部分，比例均为 50:50。

是不是非常简单。

一个参数传入需要分割的DOM数组，第二个参数是配置对象options：

• sizes: 数组，定义了每个分割元素的初始尺寸。这些尺寸可以是百分比（如 [50, 50] 表示两个元素各占一半）或像素值（如 [200, 'auto'] 表示第一个元素固定为200像素，第二个元素自动调整大小）。
• minSize: 数组或数字，定义了每个分割元素的最小尺寸。如果是一个数字，那么所有分割元素的最小尺寸都是这个值；如果是数组，那么每个元素的最小尺寸分别定义。
• gutterSize: 数字，定义了分割条（gutter）的大小，默认值为 10 像素。
• snapOffset: 数字，定义了当拖动停止时，分割条吸附到最近尺寸的偏移量。
• direction: 字符串，定义了分割的方向，可以是 'horizontal'（水平分割）或 'vertical'（垂直分割），默认为 'horizontal'。
• cursor: 字符串，定义了当鼠标悬停在分割条上时的光标样式。对于水平分割，通常使用 'row-resize'；对于垂直分割，通常使用 'col-resize'。
• gutterAlign: 字符串，定义了分割条的对齐方式，可以是 'center'（默认）、'start' 或 'end'。
• draggable: CSS 选择器字符串，定义了可以拖动的元素。默认是分割条本身，其实就是自定义拖动的元素。
• dragInterval: 数字，定义了拖动时尺寸变化的步长。
• onDragStart: 函数，当开始拖动时触发。
• onDragEnd: 函数，当拖动结束时触发。
• onDrag: 函数，在拖动过程中连续触发。

这些参数可以根据你的具体需求进行调整，以创建不同的分割布局效果。

使用useSplit.js

在需要的组件里引入：

<script setup>
...
import useSplit from '@/use/useSplit';

const {
  topPanelRef,
  bottomPanelRef,
  topLeftPanelRef,
  topRightPanelRef,
  bottomLeftPanelRef,
  bottomRightPanelRef,
} = useSplit();
</script>

<template>
    ...
</template>

志哥我想说

以上代码在这里：github.com/zzhimin/onl…

在线体验：zzhimin.github.io/online-comp…

Split.js库地址：github.com/nathancahil…

Split.js库演示地址：split.js.org/