Electron 菜单

最新推荐文章于 2024-05-19 09:45:00 发布

js世界

最新推荐文章于 2024-05-19 09:45:00 发布

阅读量1.2k

点赞数

文章标签： electron node.js javascript

本文链接：https://blog.csdn.net/u011705725/article/details/120750033

版权

示例代码

一、自定义菜单

分成三个步骤

定义菜单内容

let menuTemp = [{
	label: 'File',
	click() {
	}
}]

其中数组里的每一项都是个 menuItem

根据上述的模板数据生成一个 menu

const menu = Menu.buildFromTemplate(menuTemp)

将上述的自定义菜单添加到 app 里

Menu.setApplicationMenu(menu)

示例：

// 在主进程 main.js 中
let menuTemp = [
	{
		label: 'File',
		submenu: [
			{
				label: 'New File',
				click() {
					shell.openExternal('https://kaiwu.lagou.com/')
				}
			},
			{
				label: '首选项',
				click() {
					BrowserWindow.getFocusedWindow().webContents.send('preferences')
				}
			},
			{
				type: 'separator'
			},
			{
				label: 'open File'
			},
			{
				label: '关于',
				role: 'about'
			}
		]
	},
	{
		label: 'Edit'
	},
	{
		label: '角色',
		submenu: [
			{ label: '复制', role: 'copy' },
			{
				label: '剪切',
				role: 'cute'
			},
			{
				label: '粘贴',
				role: 'paste'
			},
			{
				label: '最小化',
				role: 'minimize'
			},
			{
				label: '放大',
				role: 'zoomin'
			}
		]
	},
	{
		label: '四种类型',
		submenu: [
			{ label: '选项1', type: 'checkbox' },
			{ label: '选项2', type: 'checkbox' },
			{ label: '选项3', type: 'checkbox' },
			{ type: 'separator' },
			{
				label: 'item1',
				type: 'radio'
			},
			{
				label: 'item2',
				type: 'radio'
			},
			{
				label: 'Windows',
				type: 'submenu',
				role: 'windowMenu'
			}
		]
	},
	{
		label: '其他',
		submenu: [
			{
				label: '打开',
				icon: './file.ico',
				accelerator: 'Ctrl + o',
				click() {
					BrowserWindow.getFocusedWindow().webContents.send(
						'mtp',
						'主进程发送消息给渲染进程'
					)
				}
			}
		]
	}
]
// 2.根据上述的模板数据生成一个 menu
const menu = Menu.buildFromTemplate(menuTemp)
// 3.将上述的自定义菜单添加到 app 里
Menu.setApplicationMenu(menu)

运行显示如下：

在这里插入图片描述

二、动态创建菜单

分成如下步骤

实例化个 Menu

let menu = new Menu()

实例化个 menuItem

let menuFile = new MenuItem({ label: '文件', type: 'normal' })

将创建好的自定义菜单添加至 menu

menu.append(menuFile)

设置菜单 menu

Menu.setApplicationMenu(menu)

示例：

<!DOCTYPE html>
<html lang="en">
	<body>
		<h2>自定义菜单</h2>
		<button id="addMenu">创建自定义菜单</button>
		<br />
		<br />
		<input type="text" placeholder="输入自定义菜单项内容" id="menuCon" />
		<br />
		<br />
		<button id="addItem">添加菜单项</button>
		<script src="./index3.js"></script>
	</body>
</html>

const { Menu, MenuItem } = require('@electron/remote')

window.addEventListener('DOMContentLoaded', () => {
	let addMenu = document.getElementById('addMenu')
	let menuCon = document.getElementById('menuCon')
	let addItem = document.getElementById('addItem')

	let menuItem = new Menu()
	// 生成菜单
	addMenu.addEventListener('click', () => {
		let menuFile = new MenuItem({ label: '文件', type: 'normal' })
		let menuEdit = new MenuItem({ label: '编辑', type: 'normal' })
		let customMenu = new MenuItem({ label: '自定义菜单项', submenu: menuItem })

		// 将创建好的自定义菜单添加至 menu
		let menu = new Menu()
		menu.append(menuFile)
		menu.append(menuEdit)
		menu.append(customMenu)

		Menu.setApplicationMenu(menu)
	})
	addItem.addEventListener('click', () => {
		const value = menuCon.value.trim()
		if (value) {
			menuItem.append(new MenuItem({ label: value, type: 'normal' }))
			menuCon.value = ''
		}
	})
})

动态创建表单

详见示例里的 index3

三、右键菜单

前面两步跟自定义菜单一样

定义菜单内容

let contextTemp = [
    { label: 'Run Code' },
    { label: 'Go to defination' },
    {
        type: 'separator'
    },
    {
        label: '其它功能',
        click() {
            console.info('其它功能选项被点击了')
        }
    }
]

根据上述的模板数据生成一个 menu

let menu = Menu.buildFromTemplate(contextTemp)

监听 contextMenu 事件，并使用 menu.popup 函数

window.addEventListener(
    'contextmenu',
     (ev) => {
         ev.preventDefault()
         menu.popup({ window: getCurrentWindow() })
     },
     false
)

menu.popup([browserWindow, x, y, positioningItem])

browserWindow BrowserWindow (可选) - 默认为 null.
x Number (可选) - 默认为 -1.
y Number (必须如果x设置了) - 默认为 -1.
positioningItem Number (可选) OS X - 在指定坐标鼠标位置下面的菜单项的索引. 默认为 -1.

在 browserWindow 中弹出 context menu .你可以选择性地提供指定的 x, y 来设置菜单应该放在哪里,否则它将默认地放在当前鼠标的位置.

示例：

const { Menu, getCurrentWindow } = require('@electron/remote')

let contextTemp = [
	{ label: 'Run Code' },
	{ label: 'Go to defination' },
	{
		type: 'separator'
	},
	{
		label: '其它功能',
		click() {
			console.info('其它功能选项被点击了')
		}
	}
]
let menu = Menu.buildFromTemplate(contextTemp)
window.addEventListener('DOMContentLoaded', () => {
	window.addEventListener(
		'contextmenu',
		(ev) => {
			ev.preventDefault()
			menu.popup({ window: getCurrentWindow() })
		},
		false
	)
})

详见示例里的 index4

js世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Electron 菜单

示例代码一、自定义菜单分成三个步骤定义菜单内容let menuTemp = [{ label: 'File', click() { }}]其中数组里的每一项都是个 menuItem2. 根据上述的模板数据生成一个 menuconst menu = Menu.buildFromTemplate(menuTemp)将上述的自定义菜单添加到 app 里Menu.setApplicationMenu(menu)示例：// 在主进程 main.js 中let menu.
复制链接

扫一扫