Vue3 + Electron自定义窗口(最大化、最小化、关闭)

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')

const loadUrl =
  process.env.MODE === 'devlopment'
    ? 'http://localhost:3000/'
    : `file://${path.join(__dirname, '../dist/index.html')}`

function createWindow() {
  const win = new BrowserWindow({
    // width: 800,
    // height: 600,
    frame: false, // 隐藏窗口边框和标题栏
    fullscreen: true, // 设置全屏
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, './preload.js')
      // nodeIntegration: true,
    }
  })

  // 显示控制台
  // let contents = win.webContents
  // contents.openDevTools()

  win.loadURL(loadUrl)


  ipcMain.on('window-min', () => {
    win.minimize()
  })

  ipcMain.on('window-max', () => {
    win.maxmize()
  })

  ipcMain.on('window-close', () => {
    win.close()
  })
}

app.whenReady().then(() => {
  createWindow()

  // 窗口长度为0 说明创建窗口失败 重新创建
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

preload.js

const { contextBridge, ipcRenderer } = require('electron')

// 这样 electronAPI 就会被挂载到window上，页面直接通过window.方法名就可以调用
contextBridge.exposeInMainWorld('electronAPI', {
  minimize: () => ipcRenderer.send('window-min'), // 最小化
  maxmize: () => ipcRenderer.send('window-max'), // 最大化
  shutdown: () => ipcRenderer.send('window-close'), // 退出
})

任意vue页面

<template>
  <div @click="maxmize">最大化</div>
  <div @click="minimize">最小化</div>
  <div @click="shutdown">关闭</div>
</template>

<script lang="ts" setup>

const minimize = () => {
  window.electronAPI.minimize()
}

const maxmize = () => {
  window.electronAPI.maxmize()
}

const shutdown = () => {
  window.electronAPI.shutdown()
}

</script>

<style lang="less" scoped></style>