Quasar CLI with Webpack - @quasar/app-webpack
将 Electron 无边框窗口与 QBar 一起使用是一个不错的组合：
主进程
设置无边框窗口
首先，安装 @electron/remote 依赖。
$ yarn add @electron/remote
// or:
$ npm install @electron/remotecontent_paste
然后，在您的 src-electron/main-process/electron-main.js 文件中添加以下代码：
// src-electron/main-process/electron-main.js
import { app, BrowserWindow, nativeTheme } from 'electron'
import { initialize, enable } from '@electron/remote/main' // <-- 添加这里
import path from 'path'
initialize() // <-- 添加这里
// ...
mainWindow = new BrowserWindow({
width: 1000,
height: 600,
useContentSize: true,
frame: false // <-- 添加这里
webPreferences: {
// ...
}
})
enable(mainWindow.webContents) // <-- 添加这里
mainWindow.loadURL(process.env.APP_URL)
// ...content_paste
注意，我们还需要手动地启用 remote 模块。我们将在预加载脚本中使用它来为渲染线程提供窗口最小化/最大化/关闭功能。
预加载脚本
由于我们不能在渲染进程中直接访问 Electron 的能力，我们需要通过预加载脚本（src-electron/main-process/electron-preload.js）来提供必要的功能，我们需要编辑它：
// 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();
},
});content_paste
渲染进程
处理窗口拖拽
我们使用一个无边框窗口时，我们还需要为用户提供在桌面上任意移动应用程序的能力（只有在使用无边框窗口时才需要）。您可以使用 q-electron-drag 和 q-electron-drag--exception Quasar CSS 类来帮您。
<q-bar class="q-electron-drag"> ... </q-bar>content_paste
它允许用户在点击、按住鼠标来拖动应用程序窗口。
虽然这是一个很好的功能，但您还必须考虑到一些例外情况。自定义状态栏中可能有您不希望它触发窗口拖动的元素。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>content_paste
最小化/最大化/关闭应用
在上面的示例中，我们给自定义边框添加了 q-electron-drag，同时通过预加载脚本注入了 window.myWindowAPI 对象。
// 在一个 .vue 文件中
// 我们在调用 Electron API 时做了判断，
// 这是为了我们构建其他模式时也能正常工作 (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 };
},
};content_paste