gpt4 book ai didi

javascript - Electron :动态上下文菜单

转载 作者:行者123 更新时间:2023-12-03 12:17:59 25 4
gpt4 key购买 nike

在 Electron 中,是否可以根据用户右键单击的元素启用/禁用上下文菜单中的特定 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 作为参数传递给上下文菜单函数,这样我就可以从那里知道我点击了哪个段落。

最佳答案

我会在 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>

enter image description here

关于javascript - Electron :动态上下文菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62745948/

25 4 0