Electron開發實戰之記帳軟件4——無邊框、窗口關閉、最大最小化、隱藏右鍵菜單

代碼倉庫： https://github.com/hilanmiao/LanMiaoDesktop

建立無邊框窗體

如圖：在src-main-index.js中添加BrowserWindow參數，frame: false 就是設置無邊框窗體，transparent: true 是設置透明，這倆個須要配合使用。

去除醜陋的滾動條

窗體默認是帶着滾動條的，比較醜陋，尤爲是設置了無邊框窗體以後，十分違和，因此咱們手動修改下。

如圖：在src-renderer-App.vue中添加以下樣式。我不須要滾動條帶顏色，因此註釋了部分代碼，你們能夠本身解開看一下效果，有須要就加上。

html {
/* 禁用html的滾動條，由於用的無框架窗口，默認就會有一個滾動條，因此去掉 */
overflow-y: hidden;
}

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar {
width: 2px; /*滾動條寬度*/
/*height: 2px;  !*滾動條高度*!*/
}

/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
/*border-radius: 10px;  !*滾動條的背景區域的圓角*!*/
/*background-color: red;!*滾動條的背景顏色*!*/
}

/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
border-radius: 99px; /*滾動條的圓角*/
/*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/
/*background-color: green;  !*滾動條的背景顏色*!*/
}

自定義最大最小關閉按鈕

由於是無邊框窗口，因此原先的導航欄都沒有了，須要咱們自定義這些按鈕。UI我就不具體介紹了，你們本身看一下就好，咱們只講效果實現。

自定義按鈕咱們是放在了src-renderer-layout-layout文件中的v-toolbar 組件中。 由於標題須要須要拖拽，因此咱們給它加上樣式

style="-webkit-app-region: drag;"

但同時按鈕，文字之類的不該該被拖拽，因此咱們給這些元素全都加上樣式

style="-webkit-app-region: no-drag"

可是設置了drag以後，能夠看到就不能經過鼠標進行大小縮放了，邊框上不會出現縮放箭頭，因此須要處理下，咱們再也不對整個toolbar進行drag設置，而是僅僅設置在幾個須要拖動的區域，可是不能設置高度爲100%，不然仍是不顯示縮放箭頭，因此我設置了v-spacer的高度爲90%。

核心代碼以下，代碼比較簡單，也不用ipc通知mainWindow了，直接remote模塊作的了。有個坑，就是browserWindow.isMaximized()這個判斷並非很好使，不信你能夠本身試一下，和你預期有差異。我這裏只能用頁面判斷了，但也不是特別好使，特別是開發過程當中熱重載的時候。有解決方案的同志能夠回覆下。

winControl(action) {
    const browserWindow = remote.getCurrentWindow();
    switch (action) {
        case 'minimize':
            browserWindow.minimize()
            break;
        case 'maximize':
            if (this.isMaximized) {
                // if (browserWindow.isMaximized()) {
                browserWindow.unmaximize()
            } else {
                browserWindow.maximize()
            }
            // this.isMaximized = browserWindow.isMaximized()
            this.isMaximized = !this.isMaximized
            break;
        case 'close':
            browserWindow.close()
            break;
        default:
            break;
    }
}

隱藏右鍵菜單

雙擊頂部的工具欄，咱們能夠看到窗口能最大化，可是這樣影響咱們頁面的最大化判斷，因此須要去掉它，並且右鍵也能顯示出原始窗體菜單，並很差看。

諮詢了一些大佬，貌似windows無解？有解決方案的能夠回覆下

其實官方也有必定的說明。

網絡上其餘的解決方案我搜到兩個，一是監控鼠標移動，這個方案會出現閃爍問題，不推薦。另外一個是使用electron-drag，不過須要rebuild你的代碼，並且也有一些限制，怪麻煩的，就算了。

最終代碼以下，雖然也有瑕疵，不過總比之前的好點了。

// if (this.isMaximized) {
if (browserWindow.isMaximized()) {
    browserWindow.unmaximize()
} else {
    if (this.isMaximized) {
        browserWindow.unmaximize()
    } else {
        browserWindow.maximize()
    }
}
// this.isMaximized = browserWindow.isMaximized()
this.isMaximized = !this.isMaximized