Quasar CLI with Webpack - @quasar/app-webpack

无边框 Electron 窗口

将 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' // <-- 添加这里
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)

// ...

注意，我们还需要手动地启用 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()
  }
})

渲染进程

处理窗口拖拽

我们使用一个无边框窗口时，我们还需要为用户提供在桌面上任意移动应用程序的能力（只有在使用无边框窗口时才需要）。您可以使用 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>

最小化/最大化/关闭应用

Template

Script

All

<template>
  <div class="q-pa-md">
    <!--
      Anything after view="lHh lpr lFf" is only needed
      so we can display this example in the documentation

      Remove this part: container style="height: 400px" class="shadow-2 rounded-borders"
    -->
    <q-layout view="lHh lpr lFf" container style="height: 400px" class="shadow-2 rounded-borders">
      <q-header elevated>
        <q-bar class="q-electron-drag">
          <q-icon name="laptop_chromebook" />
          <div>Google Chrome</div>

          <q-space />

          <q-btn dense flat icon="minimize" @click="minimize" />
          <q-btn dense flat icon="crop_square" @click="toggleMaximize" />
          <q-btn dense flat icon="close" @click="closeApp" />
        </q-bar>

        <div class="q-pa-sm q-pl-md row items-center">
          <div class="cursor-pointer non-selectable">
            File
            <q-menu>
              <q-list dense style="min-width: 100px">
                <q-item clickable v-close-popup>
                  <q-item-section>Open...</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>New</q-item-section>
                </q-item>

                <q-separator />

                <q-item clickable>
                  <q-item-section>Preferences</q-item-section>
                  <q-item-section side>
                    <q-icon name="keyboard_arrow_right" />
                  </q-item-section>

                  <q-menu anchor="top end" self="top start">
                    <q-list>
                      <q-item
                        v-for="n in 3"
                        :key="n"
                        dense
                        clickable
                      >
                        <q-item-section>Submenu Label</q-item-section>
                        <q-item-section side>
                          <q-icon name="keyboard_arrow_right" />
                        </q-item-section>
                        <q-menu auto-close anchor="top end" self="top start">
                          <q-list>
                            <q-item
                              v-for="n in 3"
                              :key="n"
                              dense
                              clickable
                            >
                              <q-item-section>3rd level Label</q-item-section>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-item>

                <q-separator />

                <q-item clickable v-close-popup @click="closeApp">
                  <q-item-section>Quit</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </div>

          <div class="q-ml-md cursor-pointer non-selectable">
            Edit
            <q-menu auto-close>
              <q-list dense style="min-width: 100px">
                <q-item clickable>
                  <q-item-section>Cut</q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section>Copy</q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section>Paste</q-item-section>
                </q-item>
                <q-separator />
                <q-item clickable>
                  <q-item-section>Select All</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </div>
        </div>
      </q-header>

      <q-page-container>
        <q-page class="q-pa-md">
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?
          </p>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</template>

File

Edit

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

在上面的示例中，我们给自定义边框添加了 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 }
  }
}

发现了一处错误？帮助改进提交问题

鄂ICP备2022014971号-1

免责声明本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。