启动选项卡Menu click event to be disabled for disabled tabs

i2loujxw  于 2021-06-30  发布在  Java
关注(0)|答案(1)|浏览(319)

我对primeng有意见 p-tabMenu 对于禁用的菜单。
例如,我有一个tabmenu,有4个子选项卡->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”设置为active。
我的组件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处于禁用状态。选项卡上的click事件调用 activateMenu 方法,并在ui中显示差异pdf。
问题是这个点击事件也会触发被禁用的按钮。即使禁用了选项卡bbb、ccc,它也允许我单击选项卡,但是选项卡#中的activeitem保留了以前活动的内容,因此我无法停止事件传播。当页面加载时,默认为aaa tab。现在,即使禁用bbb,它也允许我单击选项卡“bbb”并在打印 console.logactivateMenu() label和id中的activeitem显示aaa选项卡的activeitem。有人能建议我如何防止禁用标签点击吗?

f45qwnt8

f45qwnt81#

我认为你应该用 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!");
}

请参见演示

相关问题