1

我是 angular2/primeng 的新手。

如何在左键单击而不是默认右键单击数据表中显示primeng上下文菜单？

谢谢

4

2 回答 2

0

从 PrimeNG 的 6.1.4 版本开始，它可以通过triggerEvent属性来完成。

在模板上：

<img #targetImage2 src="assets/img/vejo_trabalhos_bonitos.jpg" alt="Test image">
<p-contextMenu [target]="targetImage2" [model]="contextMenuItems" [appendTo]="'body'" triggerEvent="click"></p-contextMenu>

在组件上：

contextMenuItems: MenuItem[];

constructor(private messageService: MessageService) { }

ngOnInit(): void {
  this.contextMenuItems = [
    { label: 'Edit', icon: 'pi pi-fw pi-pencil', command: event => this.displayMessage(event.item.label) },
    { label: 'Export', icon: 'pi pi-fw pi-external-link', command: event => this.displayMessage(event.item.label) },
    { label: 'Delete', icon: 'pi pi-fw pi-trash', command: event => this.displayMessage(event.item.label) }
  ];
}

displayMessage(action: string): void {
  this.messageService.add({severity: 'info', summary: `"${action}" action clicked!`});
}

但是如果想在鼠标左键和右键事件上都显示上下文菜单。它也可以做到。

在模板上：

<img #targetImage src="assets/img/vejo_trabalhos_bonitos.jpg" alt="Test image" (click)="onLeftMouseClick($event,contextMenu)">
<p-contextMenu #contextMenu [target]="targetImage" [model]="contextMenuItems" [appendTo]="'body'"></p-contextMenu>

在组件上：

contextMenuItems: MenuItem[];

constructor(private messageService: MessageService) { }

ngOnInit(): void {
  this.contextMenuItems = [
    { label: 'Edit', icon: 'pi pi-fw pi-pencil', command: event => this.displayMessage(event.item.label) },
    { label: 'Export', icon: 'pi pi-fw pi-external-link', command: event => this.displayMessage(event.item.label) },
    { label: 'Delete', icon: 'pi pi-fw pi-trash', command: event => this.displayMessage(event.item.label) }
  ];
}

displayMessage(action: string): void {
  this.messageService.add({severity: 'info', summary: `"${action}" action clicked!`});
}

onLeftMouseClick(event: MouseEvent, contextMenu: ContextMenu): void {
  event.stopPropagation();
  event.preventDefault();
  contextMenu.show(event);
}
于 2021-07-26T16:35:50.707 回答
0

您可能需要重新考虑为什么要像这样更改默认值。右键单击几乎是人们期望上下文菜单工作的通用方式。正如 Pardeep 所说，除了扎根于代码之外，您将无法更改它。

于 2017-08-24T04:10:54.793 回答