Question

与任何标准原生应用程序一样，我的电子应用程序也需要根据实时使用结果更改多个菜单项的状态（启用/已启用）。

我在main.js中设置我的菜单：

function createWindow () {
...
...
  require('./menu/mainmenu');
}

我需要更改的MenuItem在mainmenu中定义：

{ label: "Show Colors",  
        accelerator: 'CmdOrCtrl+1', 
        enabled: getStatus(),
        click() {getWebviewWebContents().send('switchToColors');} 
 },

其中getStatus()是返回false或true的函数。

所有这些都不适用于Electron，因为菜单是在应用程序启动时创建的，根本无法修改。我认为这是一个严重缺乏，因为动态菜单项很常见（即：菜单复选框，启用/禁用等）。

有没有解决方法呢？

Answer 1

我已通过将Id设置为菜单项

来解决此问题

{ label: "Show Colors",  
        id: 'color-scale',
        accelerator: 'CmdOrCtrl+1', 
        enabled: getStatus(),
        click() {getWebviewWebContents().send('switchToColors');} 
 },

获取菜单项：

myItem = menu.getMenuItemById('color-scale')

然后，当我需要以编程方式启用/禁用它时，我正在使用：

myItem.enabled = true

或

myItem.enabled = false

Answer 2

到目前为止，我知道并使用的唯一解决方法是每次menuitem更改时重建整个菜单。这不是非常符合人体工程学的，但工作效率足够高并且不会造成很多开销。

Answer 3

这是我的解决方法：

main.js（主进程）

const menuTemplate = [{
    label: 'Options',
    submenu: [
       {
         label: 'Config',
         enabled: false,
         click() { //do stuff }
       }
    ]
}];

// Enable menu items when user login. Fetching value from renderer process
ipcMain.on('logged-in', (event, args) => {
    if (args !== true) {
        return;
    }

    // Modify menu item status
    menuTemplate[0].submenu[0].enabled = true;

    // Rebuild menu
    const menu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(menu);
});

动态更改Electron的菜单项状态

3 个答案: