[英]Custom Styling for Electron Right-Click Menu
目前,我的代码(见下文)正在提供操作系统右键菜单。 我的目标是添加自定义样式,例如更改背景颜色或添加填充。 我想知道我当前的代码是否可行,或者我是否必须使用不同的 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)
})
这是它返回的屏幕截图:
这是我想要做的截图(来自 Discord 的示例):
谢谢!
因此,我最终使用了一个名为tippy.js的库并使用了他们的右键菜单模板
这是将来查看此帖子的任何人的最终代码:
// 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.