1、引入
主進程:const {Menu,MenuItem}=require('electron');
渲染進程:const {Menu,MenuItem}=require('electron').remote;
2、設置菜單項
使用MenuItem設置的菜單項和直接對象設置的菜單項是一樣的
let xx=[
{label:'內容',accelerator:'快捷鍵'}, 綁定快捷鍵
{label:'內容',click:()=>{console.log('22')}}, 添加事件
{role:'undo'}, 上一步功能
{role:'redo'}, 下一步功能
{type:'separator'}, 分割線
{label:'旅遊',type:'checkbox',checked:true}, 添加多選,並標記,true會在內容前面打勾
{label:'吃飯',type:'checkbox',checked:false},
new MenuItem({label:'menuitem'}), 使用MenuItem設置菜單項
{label:'子菜單',
submenu:[ 設置二級菜單,鼠標滑上自動展開
{label:'二級'},
]
}
]
3、生成菜單
let menu=Menu.buildFromTemplate(xx);
4、若要將窗口頂部菜單設置成改自定義菜單
Menu.setApplicationMenu(menu);
5、彈出、關閉菜單
menu.popup();
menu.closeup();
代碼示例:
const {Menu,MenuItem}=require('electron').remote;
var view=document.querySelector('.wb');
var sp=document.querySelector('.sp');
var btn=document.querySelector('.obtn');
var gbtn=document.querySelector('.gbtn');
var cbtn=document.querySelector('.cbtn');
var dbtn=document.querySelector('.dbtn');
var proxy;
btn.onclick=function(){
let template=[
{label:'one'},
{label:'two',click:()=>{console.log('22')}},
{label:'Thre'},
{role:'undo'},
{role:'redo'},
{type:'separator'},
{label:'旅遊',type:'checkbox',checked:true},
{label:'吃飯',type:'checkbox',checked:false},
{label:'打豆豆',type:'checkbox',checked:false},
new MenuItem({label:'menuitem'}),
{label:'子菜單',
submenu:[
{label:'二級'},
{label:'二級2'}
]
}
]
let menu=Menu.buildFromTemplate(template);
//此時窗口的菜單也會變成菜單項的內容
Menu.setApplicationMenu(menu);
menu.popup();
}
gbtn.onclick=function(){
}
cbtn.onclick=function()
{
}
dbtn.onclick=function()
{
}