如何为PrimeNg Splitter面板设置最大尺寸？

PrimeNG的Splitter组件本身没有提供maxSize属性，不过可以通过以下两种方式实现最大尺寸限制：

方法一：通过onResize事件实时控制 #

利用组件的onResize实时回调，获取面板尺寸并强制限制最大值，这种方式精准度更高：

模板代码 #

<p-splitter [style]="{'height': '300px'}" (onResize)="handleSplitterResize($event)">
  <ng-template pTemplate>
    <div class="p-col p-p-3">左侧面板</div>
  </ng-template>
  <ng-template pTemplate>
    <div class="p-col p-p-3">右侧面板</div>
  </ng-template>
</p-splitter>

组件逻辑 #

import { Component } from '@angular/core';
import { SplitterResizeEvent } from 'primeng/splitter';

@Component({
  selector: 'app-splitter-max-demo',
  templateUrl: './splitter-max-demo.component.html'
})
export class SplitterMaxDemoComponent {
  // 定义左侧面板最大宽度（根据需求调整单位和数值）
  private readonly MAX_LEFT_WIDTH = 600;

  handleSplitterResize(event: SplitterResizeEvent): void {
    const leftPanel = event.panel1.nativeElement;
    const currentWidth = leftPanel.offsetWidth;

    if (currentWidth > this.MAX_LEFT_WIDTH) {
      // 强制设置面板最大宽度
      leftPanel.style.width = `${this.MAX_LEFT_WIDTH}px`;
      // 同步调整分隔条位置
      event.splitter.nativeElement.style.left = `${this.MAX_LEFT_WIDTH}px`;
      // 阻止默认行为，避免继续拖动超过限制
      event.originalEvent.preventDefault();
      event.originalEvent.stopPropagation();
    }
  }
}

方法二：通过CSS强制限制宽度 #

给目标面板添加max-width样式，这种方式实现简单，但拖动时可能有轻微视觉跳动：

/* 针对左侧面板设置最大宽度 */
.p-splitter-panel:first-child {
  max-width: 600px !important;
}

/* 如果是垂直方向的Splitter，针对顶部面板设置最大高度 */
.p-splitter-panel:first-child {
  max-height: 400px !important;
}

关于尺寸获取的问题 #

你之前用onResizeStart()和onResizeStop()拿不到当前宽度，是因为：

• onResizeStart触发于拖动开始前，此时面板宽度还未发生变化
• onResizeStop触发于拖动结束后，虽然能拿到最终尺寸，但无法实时拦截超限制的拖动操作
  推荐使用onResize事件，它会在拖动过程中实时触发，且事件对象中的panel1/panel2可以直接获取面板的原生DOM元素，通过offsetWidth/offsetHeight就能拿到当前尺寸。

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