angular primeng如何在单击鼠标左键时显示上下文菜单
angular primeng如何在单击鼠标左键时显示上下文菜单
提问于 2017-08-21 22:00:43
我是angular2/primeng的新手。
如何在数据表中显示primeng上下文菜单，而不是默认的右键单击？
谢谢
回答 2
Stack Overflow用户
发布于 2017-08-24 12:10:55
您可能需要重新考虑为什么要像这样更改默认设置。右键单击几乎是人们期望上下文菜单工作的通用方式。正如帕尔迪普所说，除了在代码中寻根之外，你无法改变这一点。
Stack Overflow用户
发布于 2021-07-27 00:35:51
从PrimeNG版本6.1.4开始，可以使用属性完成此操作。
在模板上：
<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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45799052
复制相关文章
相似问题
腾讯云开发者
