您的位置:

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):特定的菜单角色,可以是以下值之一:undoredocutcopypastepasteAndMatchStyledeleteselectAllreloadforcereloadtoggledevtoolsresetzoomzoominzoomouttogglefullscreen
  • 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 模块创建右键菜单,并学会了如何创建各种类型的菜单项和应用程序菜单。