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

设置无frame窗口

在您的src-electron/main-process/electron-main.js文件中，我们将对以下几行进行编辑：

mainWindow = new BrowserWindow({
  width: 1000,
  height: 600,
  useContentSize: true,
  frame: false // <-- 添加这个
})

处理窗口拖动

当我们使用无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，并且还使用Electron API为最小化，最大化和关闭应用程序按钮添加了处理程序：

// 一些.vue文件

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

// 下面的代码要求“Node集成”保持“on”状态。
// 更多信息: http://v1.quasarchs.com/quasar-cli/developing-electron-apps/node-integration

export default {
  // ...

  methods: {
    minimize () {
      if (process.env.MODE === 'electron') {
        this.$q.electron.remote.BrowserWindow.getFocusedWindow().minimize()
      }
    },

    maximize () {
      if (process.env.MODE === 'electron') {
        const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow()

        if (win.isMaximized()) {
          win.unmaximize()
        } else {
          win.maximize()
        }
      }
    },

    close () {
      if (process.env.MODE === 'electron') {
        this.$q.electron.remote.BrowserWindow.getFocusedWindow().close()
      }
    }
  }
}