我刚好熟悉angular-split的配置逻辑，结合你提到的需求（左侧最小70%宽度，右侧拖动超过30%时覆盖左侧，同时右侧宽幅限制在30%-50%），可以通过自定义拖动监听+面板属性动态调整来实现，具体步骤如下：

1. 基础组件结构配置 #

先搭建angular-split的基本框架，给两个面板绑定宽度、监听拖动事件，同时准备好控制面板状态的变量：

<as-split #split direction="horizontal" (dragMove)="onDragMove($event)">
  <as-split-area 
    [size]="leftSize" 
    [locked]="isLeftLocked"
    [order]="isRightOverlapping ? 2 : 1"
    [style.z-index]="isRightOverlapping ? 1 : 3">
    <!-- 左侧区域内容 -->
    <div class="panel-content">左侧区域</div>
  </as-split-area>
  <as-split-area 
    [size]="rightSize" 
    [minSize]="30" 
    [maxSize]="50"
    [order]="isRightOverlapping ? 1 : 2"
    [style.position]="isRightOverlapping ? 'absolute' : 'relative'"
    [style.z-index]="isRightOverlapping ? 3 : 1">
    <!-- 右侧区域内容 -->
    <div class="panel-content">右侧区域</div>
  </as-split-area>
</as-split>

2. 组件逻辑实现 #

在组件的TS文件中，定义控制变量和拖动处理函数，核心是判断右侧宽度是否超过30%，然后切换左侧锁定状态和面板的覆盖模式：

import { Component, ViewChild } from '@angular/core';
import { SplitComponent } from 'angular-split';

@Component({
  selector: 'app-split-example',
  templateUrl: './split-example.component.html',
  styleUrls: ['./split-example.component.css']
})
export class SplitExampleComponent {
  @ViewChild('split') split!: SplitComponent;
  
  leftSize = 70;
  rightSize = 30;
  isLeftLocked = false;
  isRightOverlapping = false;

  onDragMove(event: any) {
    // 获取当前右侧面板的宽度
    const currentRightSize = event.sizes[1];

    // 判断是否进入覆盖模式：右侧宽度超过30%时
    if (currentRightSize > 30) {
      this.isLeftLocked = true; // 锁定左侧宽度为70%
      this.isRightOverlapping = true;
      // 调整右侧宽度为超出30%的部分（确保最大不超过50%）
      this.rightSize = Math.min(currentRightSize, 50);
    } else {
      this.isLeftLocked = false; // 解锁左侧，恢复正常分栏拖动
      this.isRightOverlapping = false;
      this.leftSize = 100 - currentRightSize;
    }
  }
}

3. 补充CSS样式 #

为了让覆盖效果更自然，需要给面板添加基础样式，确保绝对定位时的布局正确：

.as-split {
  height: 100vh; /* 按需设置高度 */
  position: relative;
}

.panel-content {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.as-split-area {
  transition: all 0.2s ease; /* 添加过渡动画让切换更平滑 */
}

关键逻辑说明 #

• 锁定左侧面板：当右侧宽度超过30%时，通过locked属性固定左侧的70%宽度，避免左侧被挤压。
• 覆盖模式切换：利用order和z-index调整面板层级，同时给右侧面板设置absolute定位，实现覆盖左侧的视觉效果。
• 宽幅限制：通过右侧面板的minSize和maxSize直接限制其宽度范围，同时在拖动逻辑中二次校验，确保不会超出50%的上限。

这样配置后，就能实现你想要的效果：正常状态下左右分栏，当拖动右侧宽度超过30%时，左侧固定70%，右侧开始覆盖左侧，且右侧宽度始终保持在30%-50%之间。

内容的提问来源于stack exchange，提问作者Veera