将无边框 Electron 窗口与 QBar 组件组合使用是一个不错的选择。以下解释原因。
主线程
设置无边框窗口
首先，在您的应用程序中安装 @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)
// ...请注意，我们还需要显式启用远程模块。我们将在预加载脚本中使用它，为渲染线程提供窗口最小化/最大化/关闭功能。
预加载脚本
由于我们无法直接从渲染线程访问 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()
}
})渲染线程
处理窗口拖动
当我们使用无边框窗口（仅无边框！）时，我们还需要一种方法让用户能够在屏幕上移动应用程序窗口。您可以使用 q-electron-drag 和 q-electron-drag--exception Quasar CSS 辅助类来实现这一点。
<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 }
}
}