electron-vue 实现最小化、最大化及其图标切换

一、前言

关键是
render 进程通过 ipcRenderer 与 ipcMain 进行通讯，以通知 main 进程操作窗体

二、实现最小化

<i class="iconfont icon-icon_zuixiaohua" title="最小化" @click="minWindow"></i>

// 最小化窗口
function minWindow(): void {
  win.app.windowMin()
}

// preload预加载文件
// 最小化
  windowMin: () => {
    ipcRenderer.send('window-min')
  },

// 主进程
// 最小化
ipcMain.on('window-min', event => {
  const webContent = event.sender
  const win = BrowserWindow.fromWebContents(webContent)
  win.minimize()
})

二、实现最大化及其图标切换

<i
  :class="isMax ? 'iconfont icon-icon_zuixiaohua1' : 'iconfont icon-icon_zuixiaohua-1'"
  :title="isMax ? '向下还原' : '最大化'"
  @click="maxWindow"
></i>

const isMax = ref(false)

// 窗口最大化
function maxWindow(): void {
  win.app.windowMax()
  isMax.value = !isMax.value
}

// preload预加载文件
// 最大化
  windowMax: () => {
    ipcRenderer.send('window-max')
  },

// 主进程
// 最大化
ipcMain.on('window-max', event => {
  const webContent = event.sender
  const win = BrowserWindow.fromWebContents(webContent)
  // console.log(win.isMaximized())
  if (win.isMaximized()) {
    win.restore()
  } else {
    win.maximize()
  }
})

但是！！ 这么些的话会有一个问题 ，点击最大化还原的时候窗口图标显示正常，一旦拖拽或者双击就显示混乱

所以需要借助窗口最大化最小化，在主进程和渲染进程的通信消息来处理
应该在主进程中监听窗口的最大化操作，然后发送命令给渲染进程

```javascript
// 主进程
// 最大化
browserWindow.on('maximize', () => {
    browserWindow.webContents.send('set-maxminicon', 'max')
  })
  browserWindow.on('unmaximize', () => {
    browserWindow.webContents.send('set-maxminicon', 'unMax')
  })

// preload预加载文件
// 通过拖拽&双击最大化后、取消最大化后修改按钮图标
onSetMaxMinIcon: callback => ipcRenderer.on('set-maxminicon', callback),

onMounted(() => {

  window.app.onSetMaxMinIcon((e: any, b: any) => {
    if (b === 'max') isMax.value = true
    else isMax.value = false
  })
})

完事！！！

希望能帮到你！！！