如何创建可调整的分割视图或者窗格----Split.js

本文链接：https://blog.csdn.net/qq_44327851/article/details/132796381

前言：

相信大家都一定知道字符串的这个方法split()，这个方法可以将字符串拆分为子字符串数组，并返回新的数组，不会更改原始字符串。但是我今天要说的split.js和这个split()方法相差十万八千里。

背景介绍：

目前正在着手Angular的项目，在布局的设计上遇到了一个需求，实现两列布局经拖拽可进行宽度调整的设计，因为这个是在项目本身已有的代码进行设计，要改动的地方不多，代码也需要尽量的少，所以经过查阅资料，我了解到了Split.js这个工具来实现angular项目的横向分割视图的功能。其实对于React 或者vue项目，他们是有自己专门的第三方JavaScript库和框架可用于实现拖拽布局，如React项目有 React-Resizable、vue项目有Vue-Resizable等，这些库提供了更多的功能和选项，并且经过了广泛的测试和优化，但是angular没有专门处理此类功能的第三方库和框架，所以对于angular项目来说Split.js是一个可选择的快捷工具。

Split.js 是一个简单易用的 JavaScript 库，用于创建可拖动的分割面板布局。它允许用户通过拖动分割条来调整面板的大小，从而实现自定义的布局效果。下面是angular结合Split.js实现双侧拖拽布局的一个实例：

1. 安装 Split.js：在你的 Angular 项目中，使用 npm 命令安装 Split.js。
npm install split.js

2. 创建一个 Angular 组件，例如名为 SplitLayoutComponent。

3. 在 SplitLayoutComponent 的模板文件中，添加需要拖拽布局的两个 div，同时给它们分别设置一个引用变量。
<div #leftPanel class="split-panel">左侧内容</div>
<div #rightPanel class="split-panel">右侧内容</div>

4. 在组件的 TypeScript 文件中引入 Split.js 的模块，并在 ngOnInit 方法中使用 Split.js 初始化拖拽布局。
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import Split from 'split.js';

@Component({
  selector: 'app-split-layout',
  templateUrl: './split-layout.component.html',
  styleUrls: ['./split-layout.component.css']
})
export class SplitLayoutComponent implements OnInit {
  @ViewChild('leftPanel') leftPanelRef!: ElementRef;
  @ViewChild('rightPanel') rightPanelRef!: ElementRef;

  ngOnInit(): void {
    Split([this.leftPanelRef.nativeElement, this.rightPanelRef.nativeElement], {
      sizes: [50, 50],
      direction: 'horizontal',
    });
  }
}
```

在 ngOnInit 方法中，我们使用 ViewChild 获取了模板中两个 div 的引用，并传递给 Split.js 的初始化函数。

5. 添加一些 CSS 样式，设置面板的基本样式。
.split-panel {
  background-color: #ccc;
}

6. 在你的路由模块中添加 SplitLayoutComponent 的路由路径，或者在其他需要使用该组件的地方使用它。

这样，当用户访问 SplitLayoutComponent 组件时，就会初始化双侧拖拽布局，并且用户可以通过拖拽改变两个 div 的宽度。这是一个使用 Angular 和 Split.js 结合实现双侧拖拽布局的简单示例。

除了这里提到的使用第三方库来实现双侧拖拽布局，其实实还有很多其他的方法，比如：

最原始的当然是考虑使用CSS的Flexbox布局以及JavaScript的事件监听和计算来实现。
添加手柄：你可以在左右两个div之间添加一个可拖拽的手柄（resize handle），方便用户调整布局。手柄可以是一个垂直的条状元素，用户可以直接拖动它来改变左右div的宽度。
支持其他方向的拖拽：除了水平拖拽调整宽度，你还可以考虑支持垂直拖拽来调整高度。这样用户就可以自由地调整左右两个div的尺寸。
添加拖拽指示器：你可以在拖拽操作过程中添加一个指示器，以显示当前的宽度或高度数值。这对于用户来说，可以提供更直观的反馈信息。
支持多列布局：除了两个div的布局，你还可以考虑实现多列布局，让用户能够自由调整多个列的宽度。

无论你选择哪种方式，都可以根据具体的需求和项目要求来选择适合的方案。同时，记得在开发过程中进行充分的测试和用户反馈，以确保拖拽布局的可用性和用户体验。你还可以考虑进一步实现一些功能，改进或扩展一下整体效果，例如：

限制最小宽度：当用户拖拽右边的div调整宽度时，你可以设置一个最小宽度，以防止div过于收缩导致内容被挤压。可以在鼠标移动时进行判断，如果新的宽度小于最小宽度，将其设置为最小宽度。
保存用户偏好：如果需要记住用户对宽度的调整偏好，可以使用 `localStorage` 或者向服务器发送请求来保存宽度设置，这样用户下次访问时可以自动恢复之前的宽度设置。
平滑动画效果：可以使用 CSS 的过渡或动画属性，为拖拽宽度的操作添加平滑的过渡效果，增加用户体验。
响应式设计：考虑不同屏幕尺寸下的布局，可以使用CSS媒体查询来实现不同的布局方案，以适应不同设备的显示。

好了，今天的介绍和记录就到这里了，欢迎大家的阅读指正，如果你对 Split.js 有兴趣，可以访问官网了解更多信息。以下是 Split.js 官网的链接：官网地址：https://split.js.org/

在官网上，你可以找到以下内容：

1. 文档：官网提供了详细的文档，包括安装、使用和配置 Split.js 的说明。你可以在这里了解如何使用 Split.js 创建分割面板布局。

2. 示例：官网提供了多个示例，展示了 Split.js 的不同用法和布局效果。你可以通过查看这些示例来了解 Split.js 的功能和灵活性。

3. API 参考：官网提供了 Split.js 的 API 参考文档，详细介绍了库中的各种方法和选项，以及它们的用法和参数。