angular primeng如何在单击鼠标左键时显示上下文菜单
angular primeng如何在单击鼠标左键时显示上下文菜单
提问于 2017-08-21 14:00:43
我是angular2/primeng的新手。
如何在数据表中显示primeng上下文菜单，而不是默认的右键单击？
谢谢
回答 2
Stack Overflow用户
发布于 2017-08-24 04:10:55
您可能需要重新考虑为什么要像这样更改默认设置。右键单击几乎是人们期望上下文菜单工作的通用方式。正如帕尔迪普所说，除了在代码中寻根之外，你无法改变这一点。
Stack Overflow用户
发布于 2021-07-26 16: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
复制
相似问题
Android测试模块(Gradle插件1.3)：来自非默认maven存储库的依赖项
android studio中的插件gradle无法工作
Android Studio 1.3 -无法进行本机调试
Gradle android测试插件找不到测试
自定义android gradle插件无法加载类
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
