electron自定义标题栏的最大化，最小化，关闭窗口

渲染组件代码：

html 复制代码

<template>
  <div class="window-btn">
    <i class="minimize" @click="minimize">
      <img src="../assets/img/最小化.svg" alt="最小化" />
    </i>
    <i v-if="!isMaximized" class="maxiWindow" @click="maximize">
      <img src="../assets/img/最大化.svg" alt="最大化" />
    </i>
    <i v-if="isMaximized" class="resize" @click="restore">
      <img src="../assets/img/最大化.svg" alt="还原" />
    </i>
    <i class="close" @click="close">
      <img src="../assets/img/关闭.svg" alt="关闭" />
    </i>
  </div>
</template>
<script setup>
import { ref } from "vue";
const isMaximized = ref(false);
/* eslint-disable no-undef */
// 关闭窗口
const close = () => {
  electron.ipcRenderer.invoke("close");
};
// 最小化窗口
const minimize = () => {
  electron.ipcRenderer.invoke("minimize");
};
// 最大化窗口
const maximize = () => {
  electron.ipcRenderer.invoke("maximize");
  isMaximized.value = true;
};
// 还原窗口
const restore = () => {
  electron.ipcRenderer.invoke("restore");
  isMaximized.value = false;
};
</script>
<style scoped>
.window-btn {
  min-width: 110px;
  i {
    cursor: pointer;
    img {
      width: 30px;
      height: 30px;
      &:hover {
        background-color: hsla(0, 100%, 50%, 0.489);
      }
    }
  }
}
</style>

主进程代码：

javascript 复制代码

// 关闭窗口
const { dialog } = require('electron')
ipcMain.handle('close', () => {
  // 弹出确认框
  dialog
    .showMessageBox(null, {
      type: 'question',
      buttons: ['取消', '确定'],
      title: '确认关闭窗口',
      message: '确定要关闭窗口吗？'
    })
    .then((result) => {
      if (result.response === 1) {
        // 用户点击了"确定"，关闭当前窗口
        BrowserWindow.getFocusedWindow().close()
        // 软件退出
        // app.quit()
      }
    })
})

// 最小化窗口
ipcMain.handle('minimize', () => {
  BrowserWindow.getFocusedWindow().minimize()
})
// 最大化窗口
ipcMain.handle('maximize', () => {
  BrowserWindow.getFocusedWindow().maximize()
})
// 还原窗口
ipcMain.handle('restore', () => {
  BrowserWindow.getFocusedWindow().restore()
})