Electron 从入门到实践04

使用Electron API 创建上下文菜单(鼠标右键菜单)

1、修改index.html

在原来的项目目录基础上，修改index.html文件

.....
 
    
......

2、增加event.js

在原来的项目目录基础上，增加event.js文件

const Menu  = remote.Menu;
function  onload() {
	let inputText = document.getElementById('inputText')
    const contextMenuTemplate = [
      { label: '复制', role: 'copy' }, 
      { label: '粘贴', role: 'paste' },
      { label: '删除', role: 'delete' }
    ];
    const contextMenu=Menu.buildFromTemplate(contextMenuTemplate);
    inputText.addEventListener('contextmenu',function(event) {
     event.preventDefault();  // 阻止事件的默认行为，例如，submit 按钮将不会向 form 提交
     contextMenu.popup(remote.getCurrentWindow()); //  弹出上下文菜单
  });
}

运行效果如下