在Electron-Vue中实现macOS风格自定义标题栏

在Electron-Vue中实现macOS风格自定义标题栏

在Electron应用开发中，自定义标题栏是实现个性化界面设计的重要环节。本文将介绍如何在electron- vue项目中实现macOS风格的自定义标题栏，包含窗口控制、状态同步和样式优化等关键功能。

一. 核心实现步骤

1 主进程配置

在创建BrowserWindow时关闭默认框架： // main.js function createWindow() { const mainWindow = new BrowserWindow({ frame: false, titleBarStyle: “hidden”, //其他配置 }); // 监听窗口最大化状态变化 mainWindow.on(“maximize”, () => { mainWindow.webContents.send(“window-maximized”, true); }); mainWindow.on(“unmaximize”, () => { mainWindow.webContents.send(“window-maximized”, false); }); // 处理窗口操作的IPC消息 ipcMain.on(“window-minimize”, () => { mainWindow.minimize(); }); ipcMain.on(“window-maximize”, () => { if (mainWindow.isMaximized()) { mainWindow.unmaximize(); } else { mainWindow.maximize(); } }); ipcMain.on(“window-close”, () => { mainWindow.close(); }); ipcMain.handle(“window-is-maximized”, () => { return mainWindow.isMaximized(); }); //其他配置 } 窗口状态事件监听： mainWindow.on(“maximize”, () => { mainWindow.webContents.send(“window-maximized”, true); }); mainWindow.on(“unmaximize”, () => { mainWindow.webContents.send(“window-maximized”, false); });

2 预加载脚本通信

暴露安全的窗口控制API： // preload.js const windowAPI = { minimize: () => ipcRenderer.send(‘window-minimize’), maximize: () => ipcRenderer.send(‘window-maximize’), close: () => ipcRenderer.send(‘window-close’), onMaximizeChange: (callback) => { ipcRenderer.on(‘window-maximized’, (_, isMaximized) => callback(isMaximized)) } } if (process.contextIsolated) { try { contextBridge.exposeInMainWorld(’electron’, { …electronAPI, window: windowAPI }) contextBridge.exposeInMainWorld(‘api’, api) } catch (error) { console.error(error) } } else { window.electron = { …electronAPI, window: windowAPI } window.api = api }

3 自定义标题栏组件

模板结构

{{ title }}

核心逻辑

export default { data() { return { isMaximized: false } }, mounted() { window.electron.window.onMaximizeChange((isMax) => { this.isMaximized = isMax }) this.$el.addEventListener(‘dblclick’, this.handleDoubleClick) }, methods: { minimize() { window.electron.window.minimize() }, toggleMaximize() { window.electron.window.maximize() }, handleDoubleClick(e) { if (!e.target.closest(’.window-controls’)) { this.toggleMaximize() } } } }

关键样式

.titlebar { height: 30px; -webkit-app-region: drag; /* 可拖拽区域 / } .window-controls { -webkit-app-region: no-drag; / 非拖拽区域 / } .control-button { width: 16px; height: 16px; border-radius: 50%; transition: all 0.2s ease; } / macOS风格按钮配色 */ .minimize { background-color: #ffbd2e; } .maximize { background-color: #28c940; } .close { background-color: #ff5f57; }

二. TitleBar完整代码

{{ title }}