向上而不是向下打开 Angular 菜单的 Kendo UI

Question

In this StackBlitz 我有一个用于 Angular 上下文菜单的 Kendo UI。当用户右键单击菜单列表时，菜单列表会像任何常规菜单一样向下打开。

我需要的是向上而不是向下打开菜单列表。这就是我想要实现的，强制菜单总是向上：

这可能吗？我在API 中找不到任何选项。

Answer 1

您可以控制自己并指定打开上下文菜单的位置。

首先，从上下文菜单项中移除目标属性，改为在目标上监听contextmenu 事件。

其次，当触发 contextmenu 事件的事件处理程序时，调用 API 中的show 方法并分配您要使用的正确偏移量。根据菜单的预期高度计算这个位置很可能是最棘手的部分。

最后，阻止浏览器的默认上下文菜单。

onRightMouseClick(event: MouseEvent) {
  const posX = this.contextMenuTarget.nativeElement.getBoundingClientRect().left;
  const posY = this.contextMenuTarget.nativeElement.getBoundingClientRect().top - 85;
  this.contextMenu.show({
    left: posX,
    top: posY
  });

  event.preventDefault();
}

<div #target class="target" (contextmenu)="onRightMouseClick($event)">
  <p class="placeholder">Right-click to open Context menu</p>
</div>
<kendo-contextmenu [items]="items" clss="menu"> </kendo-contextmenu>

看看演示here。