目前,我的代码(请参见下文)提供了OS右键菜单。我的目标是添加自定义样式,例如更改背景颜色或添加填充。我想知道当前代码是否可行,或者是否必须使用其他Package。
这是我的代码:
const remote = electron.remote
const Menu = remote.Menu
const MenuItem = remote.MenuItem
const sceneCardElements = document.querySelectorAll('.scene-card')
let rightClickPosition = null
const sceneCardMenu = new Menu()
const sceneCardMenuItem1 = new MenuItem({
label: 'Edit',
click: () => {
remote.getCurrentWindow().loadFile('./sceneSettings.html')
}
})
sceneCardMenu.append(sceneCardMenuItem1)
sceneCardElements.forEach((sceneCardElement) => {
if (sceneCardElement == null) return
sceneCardElement.addEventListener('contextmenu', (e) => {
e.preventDefault()
rightClickPosition = {x: e.x, y: e.y}
sceneCardMenu.popup(remote.getCurrentWindow())
}, false)
})
这是返回结果的屏幕截图:My Code's Output
这是我要执行的操作的屏幕截图(来自Discord的示例):
An Example Software's Output
谢谢!
最佳答案
因此,我最终使用了一个名为tippy.js的库,并使用了它们的右键菜单template
这是将来查看此帖子的任何人的最终代码:
// Get the Element you want to Right-Click
const element = document.querySelector('#rightClickable')
// Define the Tippy.js Rightclick Element
const instance = tippy(element, {
// Get the Template you made into JS
content: document.getElementById('rightClickMenuTemplate').innerHTML,
placement: 'right-start',
trigger: 'manual',
interactive: true,
arrow: false,
offset: [0, 0],
allowHTML: true,
});
// Add the Event Listener
element.addEventListener('contextmenu', (event) => {
event.preventDefault();
instance.setProps({
getReferenceClientRect: () => ({
width: 0,
height: 0,
top: event.clientY,
bottom: event.clientY,
left: event.clientX,
right: event.clientX,
}),
});
instance.show();
});
<!-- Right Click the Text Below -->
<p id="rightClickable">Right Click Me!</p>
<!-- Right-Click Menu Template Used by Tippy.js -->
<div id="rightClickMenuTemplate" style="display: none; visibility: hidden;">
<strong>Hi from the Right-Click Menu</strong>
</div>
<!-- Import Tippy.js -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
关于javascript - Electron 右键菜单的自定义样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66658736/