Electron 右键菜单详解

一、概述

Electron 可以使用 menu 模块创建自定义的应用程序菜单。这些菜单不仅仅可以在主进程中使用，还可以在渲染进程中使用。本文将详细讲解如何创建 electron 右键菜单。

二、创建右键菜单

创建右键菜单可以通过 Menu.buildFromTemplate(template) 方法实现，参数 template 是一个对象数组。下面是一个简单的例子：

const { Menu, MenuItem } = require('electron')
const menu = new Menu.buildFromTemplate([
  { label: '菜单项 1' },
  { label: '菜单项 2', click() { console.log('点击了菜单项 2') } }    
])
window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  menu.popup({ window: remote.getCurrentWindow() })
}, false)

该例子创建了一个只包含两个菜单项的菜单，通过 contextmenu 事件触发，调用 popup 方法弹出菜单。

三、菜单项详解

每个菜单项都是一个对象，包含以下属性：

• label (String)：菜单项的文本
• accelerator (String)：快捷键，格式为平台特定。
• click (Function)：当菜单项被点击时执行的函数。
• enabled (Boolean)：菜单项是否可用。
• visible (Boolean)：菜单项是否可见。
• type (String)：菜单项类型，可以是 normal（普通菜单项）、separator（分隔符）或 submenu（子菜单）。默认值为 normal。
• icon (String)：菜单项图标，可以使用 nativeImage.createFromPath() 方法创建。
• submenu (Array): 子菜单。
• role (String)：特定的菜单角色，可以是以下值之一：undo、redo、cut、copy、paste、pasteAndMatchStyle、delete、selectAll、reload、forcereload、toggledevtools、resetzoom、zoomin、zoomout、togglefullscreen。
• submenu (Array): 子菜单。

四、案例展示

下面，我们以一个文件管理器为例，展示如何使用 electron 右键菜单。我们要实现的功能包括：

• 新建文件夹
• 新建文件
• 重命名
• 复制
• 剪切
• 粘贴
• 删除

1. 新建文件夹和新建文件

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

const menu = new Menu.buildFromTemplate([
  {
    label: '新建文件夹',
    click: () => {
      console.log('新建文件夹')
    }
  },
  {
    label: '新建文件',
    click: () => {
      console.log('新建文件')
    }
  }
])

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

2. 重命名

{
  label: '重命名',
  click: () => {
    console.log('重命名')
  }
}

3. 复制、剪切、粘贴和删除

复制、剪切和粘贴可以在渲染进程中使用 document.execCommand('copy/cut/paste') 实现。删除需要使用 Node.js 模块。

{
  label: '复制',
  click: () => {
    document.execCommand('copy')
  }
},
{
  label: '剪切',
  click: () => {
    document.execCommand('cut')
  }
},
{
  label: '粘贴',
  click: () => {
    document.execCommand('paste')
  }
},
{
  label: '删除',
  click: () => {
    fs.unlinkSync(filePath)
  },
  enabled: fs.existsSync(filePath) // 文件存在才可用
}

五、总结

通过本文的学习，我们了解了如何使用 electron 的 menu 模块创建右键菜单，并学会了如何创建各种类型的菜单项和应用程序菜单。