我对 PrimeNG p-tabMenu
的菜单有疑问,该菜单被禁用。
例如,我有一个带有 4 个子选项卡的 tabMenu -> AAA、BBB、CCC、DDD。
这就是在 ts 组件中设置 menuItems 的方式。
//....
invDocs: InventoryDocs[] = [];
invMenu: InventoryDocs[] = [];
this.invMenu = this.data.cdMenu;
this.invDoc = this.data.cdDocs;
this.menuItems = [];
if(this.invMenu != null && this.invMenu.length > 1){
this.showMenu = true;
for (let i = 0; i < this.invMenu.length; i++) {
this.menuItems.push({label: this.invMenu[i].fileDescr, id: this.invMenu[i].menuId, disabled: this.invMenu[i].subCount > 0});
this.activeItem = this.menuItems[0];
}
this.currentPdf = this.invDoc.docBlob;
}
activateMenu(tab){
console.log(tab);
this.invDocId = tab.activeItem.id;
this.showMenu = true;
this.retriveCurrentPdf(this.invDocId);
}
.....//
推送的样本值:
this.menuItems.push({lable: 'AAA', id: 1, disabled: false});
this.menuItems.push({lable: 'BBB', id: 1, disabled: true});
this.menuItems.push({lable: 'CCC', id: 1, disabled: true});
this.menuItems.push({lable: 'DDD', id: 1, disabled: false});
默认情况下,“AAA”设置为 Activity 状态。
我的组件 html 如下所示:
<div style="width: 3em;">
<p-tabMenu #tab [model]="menuItems" [activeItem]="activeItem" (click)="activateMenu(tab)" class="customWrapper" ></p-tabMenu>
</div>
页面呈现有 4 个选项卡,其中启用了 AAA 和 DDD,禁用了 BBB、CCC。选项卡上的单击事件调用 activateMenu
方法并在 UI 中显示 diff pdf。
问题出在这个点击事件上,禁用的按钮也会触发该事件。即使选项卡 BBB、CCC 被禁用,它也允许我单击该选项卡,但选项卡# 中的 activeItem 保留了之前 Activity 的内容,因此我无法停止事件传播。假设页面加载时默认为 AAA 选项卡。现在,即使 BBB 被禁用,它也可以让我单击选项卡“BBB”,当我在 activateMenu()
中打印 console.log
时,标签和 id 中的 activeItem 显示选项卡 AAA。有人可以建议我如何防止点击禁用的选项卡吗?
最佳答案
我认为你应该使用 command
函数,它是 MenuItem
的一部分。仅当选项卡未禁用时,此功能才会在点击时触发。
this.items = [
{
label: "Home",
icon: "pi pi-fw pi-home",
command: event => {
this.activateMenu(event);
}
},
{
label: "Edit",
icon: "pi pi-fw pi-pencil",
disabled: true,
command: event => {
this.activateMenu(event); // this one won't be triggered because tab is disabled
}
}
]
activateMenu(event) {
console.log("click on " + event.item.label + " tab!");
}
参见demo
关于java - PrimeNG tabMenu 单击事件对于禁用的选项卡禁用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65192746/