Electron 中如何创建上下文菜单 (Context Menu)？

推荐答案

在 Electron 中创建上下文菜单（Context Menu）可以通过 Menu 和 MenuItem 模块来实现。以下是一个简单的示例代码：

// www.javascriptcn.com code example
const { app, BrowserWindow, Menu, MenuItem } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  const contextMenu = new Menu();
  contextMenu.append(new MenuItem({
    label: '复制',
    role: 'copy'
  }));
  contextMenu.append(new MenuItem({
    label: '粘贴',
    role: 'paste'
  }));

  mainWindow.webContents.on('context-menu', (e, params) => {
    contextMenu.popup(mainWindow, params.x, params.y);
  });
});

本题详细解读

1. 引入必要的模块

首先，我们需要引入 Menu 和 MenuItem 模块。Menu 用于创建菜单，而 MenuItem 用于定义菜单中的每一项。

const { Menu, MenuItem } = require('electron');

2. 创建上下文菜单

使用 Menu 类创建一个新的菜单实例，并通过 append 方法添加菜单项。每个菜单项可以通过 MenuItem 类来定义。

// www.javascriptcn.com code example
const contextMenu = new Menu();
contextMenu.append(new MenuItem({
  label: '复制',
  role: 'copy'
}));
contextMenu.append(new MenuItem({
  label: '粘贴',
  role: 'paste'
}));

3. 监听上下文菜单事件

在 BrowserWindow 的 webContents 上监听 context-menu 事件。当用户右键点击时，触发该事件，并调用 contextMenu.popup() 方法显示菜单。

mainWindow.webContents.on('context-menu', (e, params) => {
  contextMenu.popup(mainWindow, params.x, params.y);
});

4. 设置菜单项的角色

在 MenuItem 中，role 属性可以指定菜单项的行为。例如，role: 'copy' 会自动处理复制操作，role: 'paste' 会自动处理粘贴操作。Electron 提供了许多内置的角色，如 undo, redo, cut, copy, paste, selectAll 等。

5. 自定义菜单项

除了使用内置角色外，你还可以通过 click 事件来自定义菜单项的行为。

contextMenu.append(new MenuItem({
  label: '自定义操作',
  click: () => {
    console.log('自定义操作被点击');
  }
}));

通过以上步骤，你可以在 Electron 应用中创建并显示一个上下文菜单。