electron 自定义右键菜单
生活随笔
收集整理的這篇文章主要介紹了
electron 自定义右键菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現思路
1.使用@electron/remote模塊實現
1.0 監聽右鍵，并阻止默認行為
下面的代碼阻止HTML頁面右鍵彈出默認的右鍵菜單。并在渲染進程控制臺中輸出字符串信息"你點擊的右鍵"。
window.onload = ()=>{window.addEventListener("contextmenu",(e)=>{e.preventDefault() //阻止默認行為console.log("你點擊的右鍵")}) }在上面代碼的基礎上結合之前學習的menu和remote，共同實現渲染進程中的右鍵菜單。
1.1 main.js
主要是實現remote的引入與設置。可以參看：electron新版本中使用remote - 在主程序中引入和初始化
const { app,BrowserWindow,ipcMain,shell} = require("electron") const remote = require("@electron/remote/main") //1 remote.initialize()//2let mainWindow = nullapp.on("ready",()=>{mainWindow = new BrowserWindow({width:300,height:300,webPreferences:{nodeIntegration:true,//允許渲染進程使用nodejscontextIsolation:false//允許渲染進程使用nodejs}})mainWindow.loadFile("index.html")mainWindow.on("closed",()=>{mainWindow = null})remote.enable(mainWindow.webContents)//3 })1.2 index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>利用remote實現右鍵菜單</title></head> <body> <script src="popupmenu.js"></script> </body> </html>1.3 popupmenu.js
const remote = require("@electron/remote") const Menu = remote.Menuconst menu_tpl = [{label:"文件",submenu:[{label:"新建"},{label:"打開"},{label:"保存"},]},{label:"編輯",submenu:[{label:"撤銷"},{label:"重做"},{label:"清空"},]}, ]const context_menu = Menu.buildFromTemplate(menu_tpl)window.onload = ()=>{window.addEventListener("contextmenu",(e)=>{e.preventDefault() //阻止默認行為//彈出右鍵菜單context_menu.popup({window:remote.getCurrentWindow()})}) }運行后效果
2.使用主進程和渲染進程通信實現
總結
以上是生活随笔為你收集整理的electron 自定义右键菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Wiki引擎mediawiki
- 下一篇： 因为计算机丢失user32.dll,电脑