Electron自定义导航栏

默认情况下electron会有一个默认的原生导航栏。

但在具体的业务场景下，这个原生的导航栏显得就那么适用了。需要更进一步根据产品自定义导航栏。

---

一、去除原生导航栏

在主进程代码中配置frame: false  关闭原生导航栏

import {BrowserWindow} from 'electron'
mainWindow = new BrowserWindow({
        height: 690,
        useContentSize: true,
        width: 1100,
        minWidth: 1100,
        minHeight: 690,
        frame: false//关闭原生导航栏
    })

 

二、在业务代码中写出导航栏样式

<template>
    <section class="MainHeader">
        <div style="display: flex;">
            <router-link :to="'/timetables'" class="logo noDrag" v-stat="{action:'logo'}"/>
            <div class="userInfo noDrag" v-if="userInfo">
                <div class="name " @click="path" v-stat="{action:'userInfo'}">
                    <img src="~assets/images/user.png"/>
                    <span>{{userInfo?userInfo.name:''}}</span>
                </div>
                <span class="logout" @click="logOut">退出</span>
            </div>
        </div>
        <div class="systemBtn">
            <i class="mini noDrag" title="最小化" @click="setWin('min')"></i>
            <i title="最大化" class="max noDrag" @click="setWin('max')"></i>
            <i title="关闭" class="close noDrag" @click="setWin('close')"></i>
        </div>
    </section>
</template>

 

三、可拖拽区

自定义的导航栏鼠标点击是无法拖动的，需要在css中增加-webkit-app-region: drag; 让鼠标可以拖动，若可拖动的html结构中有点击事件，那么需要在点击元素的css中另加-webkit-app-region: no-drag; 让其可触发点击事件，若不加该css则点击事件无效。

.MainHeader {
        -webkit-app-region: drag;
        .noDrag{
            -webkit-app-region: no-drag;
        }

 

四、自定义最小化、最大化、关闭

当我们在运行客户端时，electron称其为渲染进程，electron客户端启动则称为主进程。

最小化、最大化和关闭方法我们需要在主进程调用，而当我们实际触发最小化等等事件时是在渲染进程中的。因此我们需要将渲染进程，也就是实际运行的页面中最小化等等相关事件触发传递给主进程，然后在主进程中做事件监听，当收到渲染进程传来的方法时，调用最小化、最大化、关闭等方法来达到与原生导航栏一直的效果。

HTML

 <i class="mini noDrag" title="最小化" @click="setWin('min')"></i>
 <i title="最大化" class="max noDrag" @click="setWin('max')"></i>
 <i title="关闭" class="close noDrag" @click="setWin('close')"></i>

JS：渲染进程（也就是当前页面）通过ipcRenderer.send 将方法字段名传递给主进程。

const {ipcRenderer} = require("electron");

    export default {
        methods: {
            setWin(type){
                ipcRenderer.send(type);
            }
        }

JS：主进程中监听事件，执行相应的方法。

import {BrowserWindow, ipcMain} from 'electron'

mainWindow = new BrowserWindow({
        height: 690,
        useContentSize: true,
        width: 1100,
        minWidth: 1100,
        minHeight: 690,
        frame: false
    })

ipcMain.on('min', () => mainWindow.minimize());
ipcMain.on('max', () => {
    if (mainWindow.isMaximized()) {
        mainWindow.restore();
    } else {
        mainWindow.maximize()
    }

});
ipcMain.on('close', () => mainWindow.close());

关于更多electron导航栏更多自定义功能可了解  官方相关文档