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

Question

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

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

这可能吗？我在 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。

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

Opening Kendo UI for Angular menu upwards instead of downwards

kendo-ui

kendo-ui-angular2

angular