博客

electronmenu模块

  • Post category:other

Electron Menu 模块

Electron Menu 模块是 Electron 提供的一个用于创建菜单的模块。通过该模块，我们可以创建应用程序菜单、上下文菜单等多种类型的菜单。本文详细讲解 Electron Menu 模块的使用方法，并提供两个示例说明。

创建菜单

在 Electron 中，可以使用 Menu 类创建菜。以下是创建一个简单菜单的示例：

const { Menu } = require('electron')

const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        accelerator: 'CmdOrCtrl+N',
        click() {
          console.log('新建文件')
        }
      },
      {
        label: '打开',
        accelerator: 'CmdOrCtrl+O',
        click() {
          console.log('打开文件')
        }
      },
      {
        type: 'separator'
      },
      {
        label: '退出',
        accelerator: 'CmdOrCtrl+Q',
        click() {
          app.quit()
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        accelerator: 'CmdOrCtrl+Z',
        role: 'undo'
      },
      {
        label: '重做',
        accelerator: 'Shift+CmdOrCtrl+Z',
        role: 'redo'
      },
      {
        type: 'separator'
      },
      {
        label: '剪切',
        accelerator: 'CmdOrCtrl+X',
        role: 'cut'
      },
      {
        label: '复制',
        accelerator: 'CmdOrCtrl+C',
        role: 'copy'
      },
      {
        label: '粘贴',
        accelerator: 'CmdOrCtrl+V',
        role: 'paste'
      },
      {
        label: '全选',
        accelerator: 'CmdOrCtrl+A',
        role: 'selectall'
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

在上面的示例中，我们首先定义了一个菜单模板 template，然后使用 Menu.buildFrom 方法创建了一个菜单对象 menu，最后使用 Menu.setApplicationMenu 方法将该菜单设置为应用程序菜单。

上下文菜单

在 Electron 中，可以使用 Menu 类创建上下文菜单。以下是创建一个简单上下文菜单的示例：

const { Menu, MenuItem } = require('electron')

const menu = new Menu()
menu.append(new MenuItem({
  label: '复制',
  role: 'copy'
}))
menu.append(new MenuItem({
  label: '粘贴',
  role: 'paste'
}))

window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  menu.popup({ window: remote.getCurrentWindow() })
}, false)

在上面的示例中，我们首先创建了一个菜单对象 menu，然后使用 menu.append 方法添加了两个菜单项，最后使用 menu.popup 方法在鼠标键点击时弹出该菜单。

注意事项

在使用 Electron Menu 模块时，需要注意以下事项：

  • 菜单模板中的 click 方法和 role 属性可以实现菜单项的点击事件。
  • 菜单模板中的 accelerator 属性可以为菜单项添加快捷键。
  • 上下文单需要在 contextmenu 事件中弹出。

示例说明

以下是两个示例，说明如何使用 Electron Menu 模块：

示例一：创建应用程序菜单

const { Menu } = require('electron')

const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        accelerator: 'CmdOrCtrl+N',
        click() {
          console.log('新建文件')
        }
      },
      {
        label: '打开',
        accelerator: 'CmdOrCtrl+O',
        click() {
          console.log('打开文件')
        }
      },
      {
        type: 'separator'
      },
      {
        label: '退出',
        accelerator: 'CmdOrCtrl+Q',
        click() {
          app.quit()
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        accelerator: 'CmdOrCtrl+Z',
        role: 'undo'
      },
      {
        label: '重做',
        accelerator: 'Shift+CmdOrCtrl+Z',
        role: 'redo'
      },
      {
        type: 'separator'
      },
      {
        label: '剪切',
        accelerator: 'CmdOrCtrl+X',
        role: 'cut'
      },
      {
        label: '复制',
        accelerator: 'CmdOrCtrl+C',
        role: 'copy'
      },
      {
        label: '粘贴',
        accelerator: 'CmdOrCtrl+V',
        role: 'paste'
      },
      {
        label: '全选',
        accelerator: 'CmdOrCtrl+A',
        role: 'selectall'
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

在上面的示例中，我们使用 Menu 类创建了一个应用程序菜单，其中包含了文件和编辑两个菜单。

示例二：创建上下文菜单

const { Menu, MenuItem } = require('electron')

const menu = new Menu()
menu.append(new MenuItem({
  label: '复制',
  role: 'copy'
}))
menu.append(new MenuItem({
  label: '粘贴',
  role: 'paste'
}))

window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  menu.popup({ window: remote.getCurrentWindow() })
}, false)

在上面的示例中，我们使用 Menu 类创建了一个上下文菜单，其中包含了复制和粘贴两个菜单项。在鼠右键点击时，该菜单将弹出。

Tags: