返回

HelloElectron—让你的键盘和快捷键合作无间（五）

前端

通过菜单绑定键盘快捷键

创建菜单模板对象

第一步是创建一个菜单模板对象。该对象是一个数组，其中每个元素表示菜单栏中的一个菜单项。

const template = [
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        accelerator: 'CmdOrCtrl+Z',
        role: 'undo'
      },
      {
        label: '恢复',
        accelerator: 'CmdOrCtrl+Y',
        role: 'redo'
      },
      {
        type: 'separator'
      },
      {
        label: '剪切',
        accelerator: 'CmdOrCtrl+X',
        role: 'cut'
      },
      {
        label: '复制',
        accelerator: 'CmdOrCtrl+C',
        role: 'copy'
      },
      {
        label: '粘贴',
        accelerator: 'CmdOrCtrl+V',
        role: 'paste'
      },
      {
        label: '删除',
        accelerator: 'Delete',
        role: 'delete'
      },
      {
        type: 'separator'
      },
      {
        label: '全选',
        accelerator: 'CmdOrCtrl+A',
        role: 'selectAll'
      }
    ]
  },
  {
    label: '视图',
    submenu: [
      {
        label: '刷新',
        accelerator: 'CmdOrCtrl+R',
        role: 'reload'
      },
      {
        label: '切换全屏',
        accelerator: 'F11',
        role: 'togglefullscreen'
      },
      {
        type: 'separator'
      },
      {
        label: '重置缩放',
        accelerator: 'CmdOrCtrl+0',
        role: 'resetzoom'
      },
      {
        label: '放大',
        accelerator: 'CmdOrCtrl++',
        role: 'zoomin'
      },
      {
        label: '缩小',
        accelerator: 'CmdOrCtrl+-',
        role: 'zoomout'
      }
    ]
  },
  {
    label: '帮助',
    submenu: [
      {
        label: '关于HelloElectron',
        role: 'about'
      }
    ]
  }
];

创建Electron菜单对象

下一步是使用template对象创建一个Electron菜单对象：

const menu = Menu.buildFromTemplate(template);

绑定键盘快捷键

现在，您可以通过菜单对象的setAccelerator()方法绑定键盘快捷键：

menu.items[0].submenu.items[0].accelerator = 'CmdOrCtrl+Z';

显示菜单

最后，调用菜单对象的popup()方法显示菜单：

menu.popup();

常见问题解答

  • 如何绑定多个快捷键到一个菜单项？

您可以在accelerator属性中指定多个快捷键，用“+”分隔。例如：

accelerator: 'CmdOrCtrl+Z,CmdOrCtrl+S'
  • 如何禁用菜单项的快捷键？

将accelerator属性设置为null即可禁用快捷键。

accelerator: null
  • 如何更改菜单项的标签？

使用label属性更改菜单项的标签。

label: '我的菜单项'
  • 如何添加分隔符？

在菜单项之间添加一个type: 'separator'对象以添加分隔符。

{
  type: 'separator'
}
  • 如何将角色分配给菜单项？

您可以使用role属性将内置功能分配给菜单项。例如，role: 'undo'将为菜单项分配撤销功能。

role: 'undo'

结论

通过遵循这些步骤，您可以轻松地在菜单中绑定键盘快捷键，从而增强Electron应用程序的可用性。