electron 电子：动态关联菜单

myss37ts 于 2022-12-08 发布在 Electron

关注(0)|答案(2)|浏览(182)

在电子，是否有一种方法来启用/禁用上下文菜单中的特定MenuItem，这取决于用户右键单击的元素？我还需要关于哪个确切的元素被单击的信息，并将该信息传递给上下文菜单函数。
例如，假设我在渲染器进程中有以下html：

<p id="p1">First paragraph</p>
<p id="p2">Second paragraph</p>
<p id="p3">Third paragraph</p>

该窗口的上下文菜单如下所示：

var menu = new Menu();
menu.append(new MenuItem({label: "This menu item is always shown",}));
menu.append(new MenuItem({  // shown only when clicked on p1 or p3
  label: "This menu is not always shown",
  click: function(id){
    // I want variable id to be an id of paragraph that I have clicked on
  }
}));

因此，当我右击第一段或第三段时，会弹出一个包含2个项目的上下文菜单。但当我右击第二段时，会弹出一个包含1个项目的上下文菜单。另外，我想将段落id作为参数传递给上下文菜单函数，这样我就可以从那里知道我点击了哪个段落。

electron

来源：https://stackoverflow.com/questions/62745948/electron-dynamic-context-menu

2条答案

按热度按时间

kxxlusnw1#

我将在 contextmenu 事件处理程序中动态（重新）创建上下文菜单：
在主进程中：

如果加载远程内容，请不要打开nodeIntegration！*

const { app, BrowserWindow } = require('electron');

function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

在渲染器进程中：

请注意我是如何“远程”加载Menu和MenuItem模块的 *

<html>
  <head>
    <script>
      const { remote } = require('electron');
      const { Menu, MenuItem } = remote;

      window.addEventListener('contextmenu', (e) => {
        e.preventDefault();
        const menu = new Menu();
        menu.append(new MenuItem(new MenuItem({label: "This menu item is always shown"})));
        if (e.target.id === "p1" || e.target.id === "p3") {
          menu.append(new MenuItem({
            label: "This menu is not always shown",
            click: function(){
              alert(`you clicked on ${e.target.id}`);
            }
          }));
        }
        menu.popup({ window: remote.getCurrentWindow() })
      }, false)
    </script>
  </head>
  <body>
    <p id="p1">First paragraph</p>
    <p id="p2">Second paragraph</p>
    <p id="p3">Third paragraph</p>
  </body>
</html>

赞(0）回复(0）举报 2022-12-08

lymnna712#

嘿，所以超级晚到这个，但任何一个试图找到一些工作，为这个。我设法把一些东西放在一起，我相信工作得很好。
对于我的应用程序，某些窗口需要某些上下文菜单，而某些窗口不应该有上下文菜单。

适用范围：电子
显示：html
沟通方式：HTML & JS使用套接字进行通信以告知彼此需要什么

const { app, BrowserWindow, shell, ipcMain, nativeTheme, Tray, nativeImage, Menu  } = require('electron')
    const contextMenu = require('electron-context-menu');
    //*other includes and app logic*
    // ........
    // *then a function to decide which menu is required*
    var cntxMenu // variable holding the context menu
    var mainWindow, pluginWindow // variable holding windows
    
    // Function creating a window
    function createMain(){
      mainWindow = createWindow()
      mainWindow.loadURL('./index.html')
    }
    
    // Constant creating a window
    const createWindow = () => {
    const win = new BrowserWindow({
        webPreferences: {
            spellcheck: true
        },
        height: 1280,
        width: 1920
    })
    var menuOccupied = false
    function genMenu(selection){
        if (menuOccupied == true){
            // Disposing of the context menu currently in use
            cntxMenu()
            menuOccupied = false
        }
        if (selection == "a"){
            // Creating the new context menu
            cntxMenu = generateMenu()
            menuOccupied = true
        }else if (selection == "go"){
            cntxMenu = generateGoMenu()
            menuOccupied = true
        }else if (selection == "win"){
            cntxMenu = generateWinMenu()
            menuOccupied = true
        }else if (selection == "none"){
            //cntxMenu()
            //menuOccupied = false
        }
    }
    // * This function generates the menu to be used / You can have as many as you like to do whatever then just call whichever menus create function above as needed *
    function generateMenu(){
        return contextMenu({
            prepend: (defaultActions, parameters, browserWindow) => [
                {
                    label: 'label',
                    click: () => {
                        
                    }
                },
                {
                    label: 'label',
                    click: () => {
                        // Do stuff
                    }
                },
                {type: 'separator'},
                {
                    label: 'Plugins'
                },
                {
                    label: 'label: “{selection}”',
                    click: () => {
                        if (parameters.selectionText.length > 0){
                            // Do stuff
                        }else {
                            // Do stuff                     
                        }
                    }
                },
                {type: 'separator'},
                {
                    label: 'label',
                    click: () => {
                        // Do stuff
                    }
                },
            ]
        });
    }

Context menu Demo

赞(0）回复(0）举报 2022-12-08

我来回答

electron 电子：动态关联菜单

2条答案

相关问题

热门标签

最新问答