1

薛定谔的第四旋臂

 1 year ago
source link: https://direct5dom.github.io/2022/08/23/Electron%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%BC%E8%88%AA%E6%A0%8F/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Electron自定义导航栏

2022-08-23Electron

下面是我在项目Direct5dom/vue-markdown中的实现方式。

const { Menu } = require('electron')

// ...

var menuTemplate = [
{
label: "文件",
submenu: [
// accelerator 配置快捷键
{
label: '新建', accelerator: "ctrl+n", click: () => {
console.log("新建文件");
mainWindow.webContents.send("newFile");
}
},
{
label: '打开', accelerator: "ctrl+o", click: () => {
console.log("打开文件");
// // 调用Vue里面的openFile
// mainWindow.webContents.send("openFile");
// Electron用dialog实现打开文件
// then 等待选择完成
const { dialog } = require('electron')
dialog.showOpenDialog({
properties: ['openFile'],
filters: [
{ name: 'Markdown Files', extensions: ['md'] },
]
}).then((data) => {
console.log(data.filePaths.toString());
mainWindow.webContents.send("openFilePath", data.filePaths.toString());
});
}
},
{
type: "separator"
},
{
label: '保存', accelerator: "ctrl+s", click: () => {
console.log("保存文件");
mainWindow.webContents.send("saveFile");
}
},
{
label: '另存为…', accelerator: "ctrl+shift+s", click: () => {
console.log("另存文件")
mainWindow.webContents.send("saveAsFile");
}
},
]
},
{
label: "编辑",
submenu: [
// role按角色进行配置
{ label: "撤销", role: "undo", click: () => { console.log("撤销操作") } },
{ label: "重做", role: "redo", click: () => { console.log("重做操作") } },
{
type: "separator"
},
{ label: "剪切", role: "cut", click: () => { console.log("剪切操作") } },
{ label: "复制", role: "copy", click: () => { console.log("复制操作") } },
{ label: "粘贴", role: "paste", click: () => { console.log("粘贴操作") } },
{
type: "separator"
},
{ label: "全选", role: "selectall", click: () => { console.log("全选操作") } },

]
},
{
label: "视图",
submenu: [
{
label: "全屏", accelerator: "f11", click: () => {
console.log("全屏");
mainWindow.setFullScreen(!mainWindow.isFullScreen());
},
},
{
type: "separator"
},
{
label: "重置页面", click: () => {
console.log("重置页面");
mainWindow.webContents.reload()
},
},
{
label: "开发者工具", accelerator: "shift+f12", click: () => {
console.log("开发者工具");
mainWindow.toggleDevTools();
}
},
]
},
{
label: "帮助",
submenu: [
{
label: "作者…", click: () => {
console.log("作者页面");
shell.openExternal('https://github.com/Direct5dom');
}
},
{
label: "许可证…", click: () => {
console.log("许可证");
shell.openExternal('https://github.com/Direct5dom/vue-markdown/LICENSE');
}
},
]
},
];
// 构建菜单模板
var menuBuilder = Menu.buildFromTemplate(menuTemplate);
// 设置菜单模板为当前应用的菜单
Menu.setApplicationMenu(menuBuilder);

// ...

也可以将上述内容写到单独的JS文件中,然后通过require()引入main.js

require("../ipcMain/menu.js");

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK