一、概述
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
模块创建右键菜单,并学会了如何创建各种类型的菜单项和应用程序菜单。