突破编程_前端_JS编程实例（分割窗体组件）

1 开发目标

分隔窗体组件旨在提供灵活的窗体分隔功能，支持横向分割与纵向分隔两种类型，并具备拖拽调整窗体比例的功能，同时提供最小比例设置，以防止窗体被过度缩小：

2 详细需求

2.1 分隔窗体类型

（1）横向分割：

• 用户可以在窗体顶部或底部添加一个横向分割条，将窗体分割成上下两部分。
• 分割条的位置可以通过拖拽调整，以改变上下两部分窗体的高度比例。

（2）纵向分隔：

• 用户可以在窗体左侧或右侧添加一个纵向分割条，将窗体分割成左右两部分。
• 分割条的位置同样可以通过拖拽调整，以改变左右两部分窗体的宽度比例。

2.2 鼠标样式切换

（1）鼠标靠近状态：

• 当鼠标指针移动到分割条附近的一定范围内时，分割条应自动变为拖拽样式。
• 拖拽样式可以通过视觉上的变化来体现，例如改变分割条的颜色、形状或添加拖拽图标等。

（2）鼠标远离状态：

• 当鼠标指针离开分割条附近的范围时，分割条应自动恢复到默认样式。
• 默认样式应简洁明了，以便在不需要拖拽调整时保持窗体的整体美观性。

2.3 拖拽调整窗体比例

（1）拖拽过程：

• 用户点击并拖动拖拽样式的分割条时，应能够实时改变窗体的比例。
• 拖拽过程中，应提供平滑的过渡效果，确保窗体布局的调整连贯且自然。

（2）横向分割调整：

• 在横向分割模式下，拖动分割条将改变上下两部分窗体的高度比例。
• 用户可以通过向上或向下拖动分割条来调整上下窗体的相对大小。

（3）纵向分隔调整：

• 在纵向分隔模式下，拖动分割条将改变左右两部分窗体的宽度比例。
• 用户可以通过向左或向右拖动分割条来调整左右窗体的相对大小。

2.4 最小比例设置

（1）设置功能：

• 组件应提供设置最小比例的功能，允许用户自定义窗体在分割调整时的最小比例限制。
• 用户可以通过配置项或API接口来设置最小比例值。

（2）横向分割调整：

• 当用户尝试通过拖拽将窗体调整到小于最小比例时，应阻止进一步的调整操作。
• 此时，可以通过视觉反馈（如提示信息、分割条位置固定等）来告知用户已达到最小比例限制。

3 代码实现

首先创建一个 neat_spliterwidget.js 文件，该文件用于本组件的工具类、目录处理函数的代码构建。

（1）创建分隔窗体的基类：

首先，定义核心数据变量：

class NeatSpliterWidget {
   
   

    constructor(container,para) {
   
   

        this.container = container;
        this.para = para;

        this.wid1 = null;
        this.wid2 = null;

        this.spliterRatio = para.spliterRatio ?? 0.3;
        this.minSpace = 20;
        this.spliterSpace = 3;              // 切换鼠标样式的间距
        this.dragReadyFalg = false;
        this.dragActiveFlag = true;
        this.dragFalg = false;
        this.dragStart = 0;

        this.render();
    }

接下来，进行基础类型的渲染，包括创建子窗体：

	render() {
   
   
        this.container.style.display = 'flex';

        this.wid1Tmp = document.createElement('div');
        this.wid2Tmp = document.createElement('div');
        this.widSpliter = document.createElement('div');

        this.wid1 = document.createElement('div');
        this.wid1.style.width = '100%';
        this.wid1.style.height = '100%';
        this.wid1Tmp.appendChild(this.wid1);
        this.wid2 = document.createElement('div');
        this.wid2.style.width = '100%';
        this.wid2.style.height = '100%';
        this.wid2Tmp.appendChild(this.wid2);

    }

最后，定义鼠标事件，计算拖拽时的初始位置：

	initSpliterEvent() {
   
   
        let that = this;
        if (!that.dragActiveFlag) {