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

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