Electron 自定义边框

electron默认的顶栏边框设计，如果想要去掉很简单frame:false

frame

mainWindow = new BrowserWindow({frame:false})

弊端

1. 导致菜单按钮隐藏
2. 应用无法拖拽

拖拽问题

.titlebar {
  -webkit-app-region: drag;
  -webkit-user-select: none;
}

菜单按钮

系统titleBarStyle

hidden

mainWindow = new BrowserWindow({titleBarStyle: 'hidden'})

位置偏上 不使用是置灰

hiddenInset

mainWindow = new BrowserWindow({titleBarStyle: 'hiddenInset'})

位置偏下 不使用是置灰

customButtonsOnHover

mainWindow = new BrowserWindow({titleBarStyle: 'customButtonsOnHover'})

鼠标移动上去之后，才会出现的

弊端

1. windows需要自定义

自定义

渲染进程

let ipcRenderer = require('electron').ipcRenderer;
var max = document.getElementById('max');
if (max) {
    max.addEventListener('click', () => {
        //发送最大化命令
        ipcRenderer.send('window-max');
        //最大化图形切换
        if (max.getAttribute('src') == 'images/max.png') {
            max.setAttribute('src', 'images/maxed.png');
        } else {
            max.setAttribute('src', 'images/max.png');
        }
    })
}

var min = document.getElementById('min');
if (min) {
    min.addEventListener('click', () => {
        //发送最小化命令
        ipcRenderer.send('window-min');
    })
}

var close = document.getElementById('close');
if (close) {
    close.addEventListener('click', () => {
        //发送关闭命令
        ipcRenderer.send('window-close');
    })
}

主进程

let ipcMain = require('electron').ipcMain;
//接收最小化命令
ipcMain.on('window-min', function() {
    mainWindow.minimize();
})
//接收最大化命令
ipcMain.on('window-max', function() {
    if (mainWindow.isMaximized()) {
        mainWindow.restore();
    } else {
        mainWindow.maximize();
    }
})
//接收关闭命令
ipcMain.on('window-close', function() {
    mainWindow.close();
})