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

}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值