TypeScript上下文菜单超出屏幕边缘问题求助

要解决右键菜单超出屏幕的问题，核心是根据菜单自身尺寸和屏幕边界动态调整定位坐标，以下是具体实现步骤：

1. 获取菜单DOM引用与尺寸 #

首先通过Angular的ViewChild获取菜单元素的引用，确保能拿到菜单的实际宽高：

修改HTML模板 #

给菜单元素添加模板引用变量：

<div #contextMenu id="contextMenu">
  <div
    class="menu-link"
    *ngFor="let menuItem of contextMenuItems; index as i"
    (click)="onContextMenuClick($event, menuItem.menuEvent)">
    <div *ngIf="menuItem.menuText !== 'divider'">{{ menuItem.menuText }}</div>
    <hr *ngIf="menuItem.menuText == 'divider'" />
  </div>
</div>

在组件中声明引用 #

import { ViewChild, ElementRef } from '@angular/core';

// 组件类内添加
@ViewChild('contextMenu') contextMenu!: ElementRef<HTMLDivElement>;

2. 编写动态位置计算逻辑 #

在displayContextMenu方法中，先等待菜单构建完成并渲染，再计算不超出屏幕的坐标：

displayContextMenu(event: MouseEvent) {
  this.myContextMenuService.buildMenu();

  // 等待DOM更新，确保菜单尺寸已正确计算
  setTimeout(() => {
    const menuEl = this.contextMenu.nativeElement;
    const menuWidth = menuEl.offsetWidth;
    const menuHeight = menuEl.offsetHeight;

    // 获取屏幕可用尺寸
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;

    // 计算X坐标：若鼠标位置+菜单宽度超出屏幕，从右侧反向定位
    this.rightClickMenuPositionX = event.clientX + menuWidth > screenWidth
      ? screenWidth - menuWidth
      : event.clientX;

    // 计算Y坐标：同理处理垂直方向
    this.rightClickMenuPositionY = event.clientY + menuHeight > screenHeight
      ? screenHeight - menuHeight
      : event.clientY;
  }, 0);
}

3. 确保菜单CSS定位正确 #

菜单需使用fixed定位，基于窗口坐标系调整位置：

#contextMenu {
  position: fixed;
  /* 初始定位，后续通过Angular绑定覆盖 */
  top: 0;
  left: 0;
  /* 基础样式 */
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
}

然后在模板中绑定计算后的坐标：

<div #contextMenu id="contextMenu" 
     [style.left.px]="rightClickMenuPositionX" 
     [style.top.px]="rightClickMenuPositionY">
  <!-- 菜单项内容 -->
</div>

4. 极端情况处理：菜单高度超过屏幕 #

如果菜单选项过多导致高度超过屏幕，可添加滚动限制：

#contextMenu {
  max-height: 80vh; /* 限制最大高度为屏幕的80% */
  overflow-y: auto;
  /* 自定义滚动条样式（可选） */
  scrollbar-width: thin;
}

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