一个不错的组合是将无frame的Electron窗口与QBar组件一起使用。 这就是为什么。

主线程

设置无框架窗口

首先，在你的应用程序中安装@electron/remote依赖关系。

$ yarn add @electron/remote
// or:
$ npm install @electron/remote

然后，在你的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' // <-- a添加这个
import path from 'path'

initialize() // <-- 添加这个

// ...

mainWindow = new BrowserWindow({
  width: 1000,
  height: 600,
  useContentSize: true,
  frame: false // <-- 添加这个
  webPreferences: {
    sandbox: false // <-- 能够在预加载脚本中导入@electron/remote
    // ...
  }
})

enable(mainWindow.webContents) // <-- 添加这个

mainWindow.loadURL(process.env.APP_URL)

// ...

请注意，我们也需要明确地启用远程模块。我们将在预加载脚本中使用它，为渲染器线程提供窗口最小化/最大化/关闭的功能。

预加载脚本

由于我们不能从渲染器线程中直接访问Electron，我们需要通过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()
  }
})

渲染器线程

处理窗口拖动

当我们使用无frame窗口（仅无frame！）时，我们还需要一种使用户能够在屏幕上移动应用程序窗口的方法。 您可以为此使用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>

最小化、最大化和关闭应用程序

在上面的示例中，请注意，我们在QBar中添加了q-electron-drag，并且还使用注入的window.myWindowAPI对象（来自Electron预加载脚本）为最小化，最大化和关闭应用程序按钮添加了处理程序：

// 一些.vue文件

// 我们确保Electron API调用, 但这仅在我们用其它
// Quasar模式 (SPA/PWA/Cordova/SSR...)
// 来构建相同的应用的情况才需要

export default {
  setup () {
    // 我们依赖的
    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 }
  }
}