electron + vue项目中自定义标题栏实现最大化、最小化、关闭功能_vue-electron自定义标题栏

效果

版本信息

 "electron": "^11.0.0"
 "vue": "^3.0.0"
1
2

代码

实现逻辑

• 1、设置属性实现头部隐藏
• 2、vue中触发事件，使用electron的ipcRenderer方法去发布事件，electron主线程中接收到事件，并调用electron内部的方法实现关闭，最小化等功能。

vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
};
1
2
3
4
5
6
7

background.js中，这里主要是添加frame: false，添加底部添加了注释部分的代码，关闭调用的是destroy方法，前面看到很多博客用的都是close，但是没有效果看了electron的issues发现新版本只能用destory

import { app, protocol, BrowserWindow, ipcMain } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: "app", privileges: { secure: true, standard: true } }
]);
let win;
async function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, //实现头部的隐藏
    webPreferences: {
      enableRemoteModule: true,
      nodeIntegration: true
    }
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }
}

// 实现自定义标题栏，最小化，最大化，关闭
ipcMain.on("window-min", () => win.minimize());
ipcMain.on("window-max", () => {
  if (win.isMaximized()) {
    win.unmaximize();
  } else {
    win.maximize();
  }
});
ipcMain.on("window-close", () => {
  win.destroy();
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

App.vue中

<template>
  <div v-if="IS_ELECTRON" class="header">
    <div class="left">xxxx应用</div>
    <div class="right">
      <span class="el-icon-minus" @click="minimizeWin"></span>
      <span class="el-icon-full-screen" @click="maximizeWin"></span>
      <span class="el-icon-close" @click="closeWin"></span>
    </div>
  </div>
  <router-view />
</template>
<script>
import { ipcRenderer } from "electron";
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({ IS_ELECTRON: process.env.IS_ELECTRON });

    function minimizeWin() {
      ipcRenderer.send("window-min");
    }
    function maximizeWin() {
      ipcRenderer.send("window-max");
    }
    function closeWin() {
      ipcRenderer.send("window-close");
    }

    return { minimizeWin, maximizeWin, closeWin, ...toRefs(data) };
  }
};
</script>
<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.header {
  display: flex;
  justify-content: space-between;

  // 允许拖动应用
  -webkit-app-region: drag;
  span {
    font-size: 20px;
    margin-right: 20px;
    //避免拖动属性导致不能点击
    -webkit-app-region: no-drag;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52