Electron Menu菜单设置和右键设置

　

右键菜单设置

主进程代码：

import { Menu, shell, ipcMain, BrowserWindow } from 'electron';

// normal （常规菜单项）
// separator （分割线）
// submenu （子菜单）
// checkbox （复选菜单项）
// radio （单选菜单项）

const template = [
  {
    label: '原生应用菜单演示',
    submenu: [
      {
        label: '个人信息',
      },
      {
        type: 'separator',
      },
      {
        label: '开机启动',
        type: 'checkbox',
        checked: true,
      },
      {
        type: 'separator',
      },
      {
        label: '性别',
        submenu: [
          {
            label: '男',
            type: 'radio',
          },
          {
            label: '女',
            type: 'radio',
          },
        ],
      },
    ],
  },
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        click() {},
      },
      {
        label: '打开',
        accelerator: 'ctrl+q',
        click() {},
      },
      {
        label: '保存',
        click() {

        },
      },
      {
        type: 'separator',  // 分割线
      },
      {
        label: '打印',
        click() {},
      },
      {
        label: '退出',
        click() {},
      },
    ],
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        role: 'undo',
      },
      {
        label: '恢复',
        role: 'redo',
      },
      {
        type: 'separator',
      },
      { label: '截切',
        role: 'cut',
      },
      {
        label: '复制',
        role: 'copy',
      },
      {
        label: '黏贴',
        role: 'paste',
      },

      {
        label: '删除',
        role: 'delete',
      },
      {
        label: '全选',
        role: 'selectall',
      },
    ],
  },
  {
    label: '视图',
    submenu: [
      {
        label: '缩小',
        role: 'zoomin',
      },
      { label: '放大',
        role: 'zoomout',
      },
      { label: '重置缩放',
        role: 'resetzoom',
      },
      {
        type: 'separator',
      },
      {
        label: '全屏',
        role: 'togglefullscreen',
      },
    ],
  },
  {
    label: '帮助',
    submenu: [
      {
        label: '关于',
        click() {
          shell.openExternal('https://www.baidu.com');
        },
      },
    ],
  },
];
const m = Menu.buildFromTemplate(template);


Menu.setAPPlicationMenu(m);

// 右键菜单
const contextMenuTemplate = [
  {
    label: '撤销',
    role: 'undo',
  },
  {
    label: '恢复',
    role: 'redo',
  },
  {
    type: 'separator',
  },
  {
    label: '截切',
    role: 'cut',
  },
  {
    label: '复制',
    role: 'copy',
  },
  {
    label: '黏贴',
    role: 'paste',
  },
  {
    type: 'separator',
  },  // 分隔线
  {
    label: '全选',
    role: 'selectall',
  },
  // Select All菜单项
];

const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);


// 监听右键事件
ipcMain.on('contextMenu', () => {
  contextMenu.popup(BrowserWindow.getFocusedWindow());
});

渲染进程代码：

import {ipcRenderer} from 'electron'



document.addeventlistener('contextmenu',function(e){
    // 右键事件触发
    e.preventDefault();

    ipcRenderer.send('contextMenu');
})

文章创建于: 2019-09-11 22:24:03

相关阅读

js oncontextmenu事件使用详解

定义和使用oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。注意：所有浏览器都支持 oncontextmenu 事件， contextm

如何正确设计下拉菜单？

表单中使用的下拉菜单有优点，但同样的它也有一些缺点和关注点，那我们要怎样才能正确设计下拉菜单呢？在表单中使用下拉菜单有很多优点

电脑桌面回收站右键的属性菜单不见了怎么恢复?

在咱们的电脑中，几乎所有文件或者是程序的右键菜单中都有属性这个选项，在这个属性窗口中，咱们可以对该文件或者是程序进行一些常规的

EXCEL制作二级下拉菜单有什么方法

Excel的下拉菜单在平时工作中经常用到，要在菜单中编辑多个选项，所以也是要掌握的操作方法。以下是seo实验室小编为您带来的关于EXCE

Firefox 鼠标手势使用时被右键的上下文菜单挡住解决方

也不知道从什么时候开始的，在使用firefox的时候，鼠标手势总是被右键的上下文菜单挡住了，每次使用右键触发鼠标手势的时候，就弹出菜单