掌握右键菜单制作：让 Electron 应用如浏览器般便捷

2023-10-04 03:05:27

无星的 Electron 旅程（十二）：像浏览器一样制作右键菜单

简介

Electron 作为构建跨平台桌面应用程序的利器，已受到广泛认可。在开发 Electron 应用程序时，右键菜单是一个必不可少的元素，它可以为用户提供丰富的上下文操作选项。本文将详细介绍如何为 Electron 应用程序创建和自定义右键菜单，让您的应用程序像浏览器一样便捷。

创建右键菜单

第一步是创建一个右键菜单。在 Electron 中，可以使用 Menu 模块来实现：

const { Menu } = require('electron');

// 创建菜单模板
const template = [
  {
    label: '复制图片为 Base64',
    click: () => {
      // 复制图片为 Base64 的操作代码
    }
  },
  {
    label: '另存为图片',
    click: () => {
      // 另存为图片的操作代码
    }
  },
  {
    label: '复制图片地址',
    click: () => {
      // 复制图片地址的操作代码
    }
  }
];

// 创建菜单
const menu = Menu.buildFromTemplate(template);

创建好菜单后，需要将其附加到特定的 DOM 元素。通常情况下，我们会附加到 body 元素：

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

自定义右键菜单

除了创建基本的右键菜单，我们还可以进行进一步的自定义。例如，我们可以为菜单项添加子菜单，或使用 separator 分隔菜单项。

const template = [
  {
    label: '复制',
    submenu: [
      {
        label: '复制图片为 Base64',
        click: () => {
          // 复制图片为 Base64 的操作代码
        }
      },
      {
        label: '复制图片地址',
        click: () => {
          // 复制图片地址的操作代码
        }
      }
    ]
  },
  { type: 'separator' },
  {
    label: '另存为图片',
    click: () => {
      // 另存为图片的操作代码
    }
  }
];