electron 类似右键的弹出菜单

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();

menu
menuitem

代码示例:


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()
{

}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章