electron - vue 自定义关闭按钮

在渲染进程中（vue文件

<template>
    <div class="header">
        <el-icon class="closeWin" @click="closeWin"><CloseBold /></el-icon>
    </div> 
</template>

<script>
    const { ipcRenderer } = window.require("electron")
    export default {
        name: 'common-header',
        data () {
            return {
            }
        },
        methods:{
            closeWin() {
                console.log('关闭')
                ipcRenderer.send("close") // 通知主进程 关闭
            }
        }
    }
</script>

在主进程中（main.js或background.js）

import { app, protocol, BrowserWindow, globalShortcut, nativeImage,ipcMain  } from 'electron'


async function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1024,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    },
    icon: path.join(__dirname, 'icon.ico')
  })
  win.setMenu(null)

  // 监听窗口关闭事件
  ipcMain.on('close', () => {
    win.close()
  })
}

关闭前记得先关闭控制台，不然会点击无效，诡异的bug....