Electron 无边框窗口最大化最小化关闭功能

最新推荐文章于 2024-07-19 15:44:09 发布

转载最新推荐文章于 2024-07-19 15:44:09 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mica/p/10794751.html

文章标签：

#开发工具 #javascript #大数据 #ViewUI

本文介绍如何在Electron应用中实现无边框窗口，并通过主进程与渲染进程通讯，添加最大化、最小化和关闭功能。使用Vue或原生JavaScript添加按钮事件，通过IPC发送命令到主进程执行相应操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Electron 无边框窗口最大化最小化关闭功能

目的

实现无边框窗口，并添加最大化最小化和关闭功能

前提

了解Electron 主进程和渲染进程的通讯
了解 BrowserWindow相关功能

操作流程

先在界面上放三个按钮

    <!-- 窗口的右上角三个操作按钮 -->
    <section style="-webkit-app-region: no-drag">
      <button type="button" id="maxbt" @click="maxbt">max</button>
      <button type="button" id="minbt" @click="minbt">>min</button>
      <button type="button" id="closebt" @click="closebt">>close</button>
    </section>

**-webkit-app-region: drag是可拖动的样式**

**-webkit-app-region: no-drag是不可拖拽样式**

2. 添加事件把要做的操作发送给主进程

``` javascript 在Vue里面

```在原生 JavaScript 里面

var ipc = require('electron').ipcRenderer;
document.getElementById('maxbt').addEventListener('click', () => {
console.log('hello vscode!')
ipc.send('window-max');

})
document.getElementById('minbt').addEventListener('click', () => {
console.log('hello vscode!')
ipc.send('window-min');

})
document.getElementById('closebt').addEventListener('click', () => {
console.log('hello vscode!')
ipc.send('window-close');

})

在主进程中调相应的方法

const electron = require('electron')
const ipc = electron.ipcMain
//登录窗口最小化
ipc.on('window-min', function () {
  mainWindow.minimize();
})
//登录窗口最大化
ipc.on('window-max', function () {
  if (mainWindow.isMaximized()) {
    mainWindow.restore();
  } else {
    mainWindow.maximize();
  }
})
ipc.on('window-close', function () {
  mainWindow.close();
})

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})