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>