推荐答案
在 Electron 中创建上下文菜单（Context Menu）可以通过 Menu 和 MenuItem 模块来实现。以下是一个简单的示例代码：
-- -------------------- ---- -------
----- - ---- -------------- ----- -------- - - --------------------
--- -----------
--------------- -- -- -
---------- - --- ---------------
------ ----
------- ----
--------------- -
---------------- ----
-
---
----------------------------------
----- ----------- - --- -------
---------------------- ----------
------ -----
----- ------
----
---------------------- ----------
------ -----
----- -------
----
----------------------------------------- --- ------- -- -
----------------------------- --------- ----------
---
---本题详细解读
1. 引入必要的模块
首先，我们需要引入 Menu 和 MenuItem 模块。Menu 用于创建菜单，而 MenuItem 用于定义菜单中的每一项。
const { Menu, MenuItem } = require('electron');2. 创建上下文菜单
使用 Menu 类创建一个新的菜单实例，并通过 append 方法添加菜单项。每个菜单项可以通过 MenuItem 类来定义。
-- -------------------- ---- ------- ----- ----------- - --- ------- ---------------------- ---------- ------ ----- ----- ------ ---- ---------------------- ---------- ------ ----- ----- ------- ----
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 应用中创建并显示一个上下文菜单。