創(chuàng)建一個無邊框的透明窗口

    new BrowserWindow({
        width: 350,
        height: 650,
        frame: false,//有無邊框
        transparent: true,//窗口是否透明
        webPreferences: {
            devTools: false, //是否開啟調(diào)試
            nodeIntegration: true, //是否啟用Node integration
            contextIsolation: false, //是否在獨立 JavaScript 環(huán)境中運行 Electron API和指定的preload 腳本
        }
    })

再利用css來實現(xiàn)一個圓角窗口

<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')
            },
            //關(guān)閉
            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();
})

預覽