使用无边框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 }
}
}