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

效果

版本信息

 "electron": "^11.0.0"
 "vue": "^3.0.0"

代码

实现逻辑

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

vue.config.js

module.exports = {
    
    
  pluginOptions: {
    
    
    electronBuilder: {
    
    
      nodeIntegration: true
    }
  }
};

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();
});

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>