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 模塊創建右鍵菜單，並學會了如何創建各種類型的菜單項和應用程序菜單。