Electron 自定义上下文菜单

在 Electron 应用程序中，自定义上下文菜单可以为用户提供更加个性化和便捷的交互体验。本章将详细介绍如何在 Electron 中创建和自定义上下文菜单。

创建基本的上下文菜单

首先，我们需要了解如何创建一个基本的上下文菜单。上下文菜单通常通过右键点击触发。下面是一个简单的例子：

// www.javascriptcn.com code example
const { Menu } = require('electron')

// 创建一个基本的上下文菜单
const contextMenu = Menu.buildFromTemplate([
  {
    label: '选项1',
    click: () => {
      console.log('选项1被点击')
    }
  },
  {
    label: '选项2',
    type: 'separator' // 添加一个分隔符
  },
  {
    label: '选项3',
    enabled: false // 禁用这个选项
  }
])

// 将这个上下文菜单应用到主窗口
win.webContents.on('context-menu', (e, props) => {
  contextMenu.popup({window: win})
})

使用模板字符串创建上下文菜单

使用模板字符串可以使代码更易读和维护。以下是一个使用模板字符串的例子：

// www.javascriptcn.com code example
const { Menu } = require('electron')

const contextMenu = Menu.buildFromTemplate(`
  [
    { label: '选项1', click() { console.log('选项1被点击') } },
    { type: 'separator' },
    { label: '选项2', enabled: false }
  ]
`)

win.webContents.on('context-menu', (e, props) => {
  contextMenu.popup({window: win})
})

动态更新上下文菜单

在某些情况下，我们可能需要根据用户的操作动态更新上下文菜单。这可以通过监听事件并修改菜单项来实现。例如，我们可以根据用户选择的内容来更改菜单项：

// www.javascriptcn.com code example
const { Menu } = require('electron')

let contextMenu = Menu.buildFromTemplate([])

win.webContents.on('context-menu', (e, props) => {
  const items = []
  
  if (props.selectionText) {
    items.push({
      label: `搜索“${props.selectionText}”`,
      click() {
        shell.openExternal(`https://www.google.com/search?q=${encodeURIComponent(props.selectionText)}`)
      }
    })
  }

  contextMenu = Menu.buildFromTemplate(items)
  contextMenu.popup({window: win})
})

使用图标和子菜单

除了简单的文本标签外，我们还可以向上下文菜单添加图标和子菜单，以提供更丰富的用户体验。例如：

// www.javascriptcn.com code example
const { Menu, MenuItem } = require('electron')
const icon = new MenuItem({
  label: '选项1',
  icon: '/path/to/icon.png'
})

const subMenu = Menu.buildFromTemplate([
  { label: '子选项1' },
  { label: '子选项2' }
])

const contextMenu = Menu.buildFromTemplate([
  icon,
  { label: '选项2' },
  subMenu
])

win.webContents.on('context-menu', (e, props) => {
  contextMenu.popup({window: win})
})

处理键盘快捷键

为了使用户能够通过键盘快捷键访问上下文菜单中的选项，我们可以为菜单项设置快捷键：

// www.javascriptcn.com code example
const { Menu } = require('electron')

const contextMenu = Menu.buildFromTemplate([
  {
    label: '选项1',
    accelerator: 'CmdOrCtrl+1', // 设置快捷键
    click: () => {
      console.log('选项1被点击')
    }
  },
  {
    label: '选项2',
    accelerator: 'CmdOrCtrl+2',
    click: () => {
      console.log('选项2被点击')
    }
  }
])

win.webContents.on('context-menu', (e, props) => {
  contextMenu.popup({window: win})
})

高级技巧：动态生成菜单

在某些情况下，菜单项的数量和内容需要根据应用程序的状态动态生成。这时我们可以使用函数来动态生成菜单项：

// www.javascriptcn.com code example
function createContextMenu() {
  const items = []

  if (someCondition) {
    items.push({ label: '条件满足时显示的选项' })
  }

  return Menu.buildFromTemplate(items)
}

win.webContents.on('context-menu', (e, props) => {
  const contextMenu = createContextMenu()
  contextMenu.popup({window: win})
})

通过以上介绍，您可以根据自己的需求自定义 Electron 应用程序中的上下文菜单。希望这些示例能帮助您构建出更加强大和用户友好的桌面应用程序。