Electron+Vue 自定义最大化、最小化、关闭按钮

最大化、最小化、关闭是由 主进程（Main） 所控制
如果你要自定义肯定是写在了.vue文件中，也就是说，你自定义的是写在了 渲染进程（Renderer） 中。

1. 首先关闭原有的最大化、最小化、关闭按钮；

在 background.js 文件中，初始化BrowserWindow 时，添加属性 frame:false

2. 在需要实现最大最小化的vue文件中，添加如下代码：

import { ipcRenderer } from "electron"; // script标签内，引入ipcRenderer
//  methods 中 写下边三个方法，并且绑定到你自己的document 上。
minimizeWin(){
    ipcRenderer.send('window-min') // 通知主进程我要进行窗口最小化操作
},
maximizeWin(){
    ipcRenderer.send('window-max') // 通知主进程我要进行最大化 或 还原
},
closeWin(){
    ipcRenderer.send('window-close') // 通知主进程我要关闭
}

3. 在主进程中，添加以下代码，即可实现自定义的最大化、最笑话、关闭：

// import { ipcMain } from 'electron'
// 写在createWindow() 函数中。
// win 是 new BrowserWindow() 对象
// 1. 窗口 最小化
  ipcMain.on('window-min',function(){ // 收到渲染进程的窗口最小化操作的通知，并调用窗口最小化函数，执行该操作
    win.minimize();
  })
  // 2. 窗口 最大化、恢复
  ipcMain.on('window-max',function () {
    if(win.isMaximized()){ // 为true表示窗口已最大化
      win.restore();// 将窗口恢复为之前的状态.
    }else{
      win.maximize();
    }
  })

  // 3. 关闭窗口
  ipcMain.on('window-close',function (){
    win.close();
  })

4. 用户其他动作触发最大化（如双击导航栏或拖拽至顶部释放），如何监听并修改图标

// 监听主窗口最大化， 给你的BrowserWindow() 对象添加监听事件
  win.on('maximize', () => {
    win.webContents.send('mainWin-max', true)
  })
  win.on('unmaximize', () => {
    win.webContents.send('mainWin-max', false)
  })

// 在你写最大化的图片的组件或者vue文件中，给渲染进程ipcRenderer添加监听事件 最好写在mounted()中
 ipcRenderer.on('mainWin-max', (_, status) => {
 	this.isMax = status
 })
// isMax true代表最大化，更新页面上的图标
<div @click="maximizeWin" v-show="!isMax">
	<img src="../../../static/images/header/win_max.png" alt="">
</div>
<div class="max" @click="maximizeWin" v-show="isMax">
	<img src="../../../static/images/header/win_max_active.png" alt="">
</div>

5. Mac 端 也需要自己去 写 css 和 html 样式哈，可以在任意位置通过 process.platform == ‘darwin’ ?Mac : window|linux 来判断

注：ipcMain 从 electron 中引入，win 是新的 BrowserWindow 对象。
再注：设置frame:false 后，无法拖拽移动窗口，你可以在需要拖拽移动的 组件 或者 document 上 添加样式 -webkit-app-region: drag;
其次：-webkit-app-region: drag; 之后无法获取 hover或其他鼠标事件，你可以在自己需要的地方改为，no-drag；