將無邊框 Electron 視窗與 QBar 元件搭配使用是很棒的組合。原因如下。
Main thread
Setting frameless window
首先，將 @electron/remote 相依性安裝到您的應用程式中。
$ yarn add @electron/remote接著，在您的 src-electron/main-process/electron-main.js 檔案中，對這些行進行一些編輯
import { app, BrowserWindow, nativeTheme } from 'electron'
import { initialize, enable } from '@electron/remote/main' // <-- add this
import path from 'path'
initialize() // <-- add this
// ...
mainWindow = new BrowserWindow({
width: 1000,
height: 600,
useContentSize: true,
frame: false // <-- add this
webPreferences: {
sandbox: false // <-- to be able to import @electron/remote in preload script
// ...
}
})
enable(mainWindow.webContents) // <-- add this
mainWindow.loadURL(process.env.APP_URL)
// ...請注意，我們也需要明確啟用 remote 模組。我們將在預載腳本中使用它，以向渲染執行緒提供視窗最小化/最大化/關閉功能。
The preload script
由於我們無法從渲染執行緒中直接存取 Electron，因此需要透過 electron 預載腳本 (src-electron/main-process/electron-preload.js) 提供必要的功能。因此我們將其編輯為
import { contextBridge } from 'electron'
import { BrowserWindow } from '@electron/remote'
contextBridge.exposeInMainWorld('myWindowAPI', {
minimize () {
BrowserWindow.getFocusedWindow().minimize()
},
toggleMaximize () {
const win = BrowserWindow.getFocusedWindow()
if (win.isMaximized()) {
win.unmaximize()
} else {
win.maximize()
}
},
close () {
BrowserWindow.getFocusedWindow().close()
}
})Renderer thread
Handling window dragging
當我們使用無邊框視窗（僅限無邊框！）時，我們也需要一種方法讓使用者能夠在螢幕上移動應用程式視窗。您可以使用 Quasar CSS 輔助類別 q-electron-drag 和 q-electron-drag--exception 來達成此目的。
<q-bar class="q-electron-drag">
...
</q-bar>這樣做的作用是讓使用者能夠在螢幕上點擊、按住並同時拖曳滑鼠時，拖動應用程式視窗。
雖然這是一個很棒的功能，但您也必須考慮到需要指定一些例外情況。在您的自訂狀態列中，可能有些元素您不希望觸發視窗拖曳。預設情況下，QBtn **已排除此行為**（無需為此做任何事情）。如果您想為具有 q-electron-drag 類別的元素的任何子元素新增例外情況，您可以將 q-electron-drag--exception CSS 類別附加到它們。
為圖示新增例外情況的範例
<q-bar class="q-electron-drag">
<q-icon name="map" class="q-electron-drag--exception" />
<div>My title</div>
</q-bar>最小化、最大化和關閉應用程式
在上面的範例中，請注意我們將 q-electron-drag 新增到我們的 QBar，並且我們也透過使用注入的 window.myWindowAPI 物件（來自 Electron 預載腳本）為最小化、最大化和關閉應用程式按鈕新增了處理程序。
// We guard the Electron API calls, but this
// is only needed if we build same app with other
// Quasar Modes as well (SPA/PWA/Cordova/SSR...)
export default {
setup () {
// we rely upon
function minimize () {
if (process.env.MODE === 'electron') {
window.myWindowAPI.minimize()
}
}
function toggleMaximize () {
if (process.env.MODE === 'electron') {
window.myWindowAPI.toggleMaximize()
}
}
function closeApp () {
if (process.env.MODE === 'electron') {
window.myWindowAPI.close()
}
}
return { minimize, toggleMaximize, closeApp }
}
}