VUE+ELECTRON自定义窗口导航栏

创建一个无边框的透明窗口

    new BrowserWindow({
        width: 350,
        height: 650,
        frame: false,//有无边框
        transparent: true,//窗口是否透明
        webPreferences: {
            devTools: false, //是否开启调试
            nodeIntegration: true, //是否启用Node integration
            contextIsolation: false, //是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本
        }
    })

再利用css来实现一个圆角窗口

<div class="innerborder">
</div>

    .innerborder{
        width: 100%;
        height: 100vh;
        background-color: #FFFFFF;
        border-radius: 10px;
    }

用div来绘制导航条

        <div class="navigation">
            <div style="display: flex;">
                <div style="width: 70%;"></div>
                <div class="minimize" @click="minimize">
                    <i class="el-icon-minus"></i>
                </div>
                <div class="closebtn" @click="close">
                    <i class="el-icon-close"></i>
                </div>
            </div>
        </div>

引入

const {ipcRenderer} = require('electron')

vue

            //最小化
            minimize() {
                ipcRenderer.send('win-minimize')
            },
            //关闭
            close(){
                ipcRenderer.send('win-close')
            },

样式

    .navigation {
        width: 100%;
        line-height: 35px;
        background-color: #2cbbe7;
    }

    .minimize {
        width: 15%;
        text-align: center;
        -webkit-app-region: no-drag;
    }

    .minimize:hover {
        border-radius: 0px 0px 0px 0px;
        color: #FFFFFF;
        background-color: #15a6d2;
        cursor: pointer;
    }

    .closebtn {
        color: #FFFFFF;
        width: 15%;
        -webkit-app-region: no-drag;
        text-align: center;
    }

    .closebtn:hover {
        border-radius: 0px 0px 0px 0px;
        color: #FFFFFF;
        background-color: #fb7373;
        cursor: pointer;
    }

主进程

ipcMain.on('win-minimize', function() {
    win.minimize();
})

ipcMain.on('win-close', function() {
    win.close();
})

预览