Electron去掉窗口边框并添加关闭按钮

在 Electron 中,如果你想去掉默认的窗口边框(frame)并添加额外的按键,你可以通过以下步骤来实现:

  1. 去掉默认的窗口边框

使用 BrowserWindowframe 选项,并将其设置为 false 来创建一个无边框的窗口。

javascript 复制代码
const { BrowserWindow } = require('electron')

let win = new BrowserWindow({
  width: 800,
  height: 600,
  frame: false // 这里设置为 false 去掉边框
})
  1. 添加额外的按键

有几种方法可以实现这一点,但最常见的是使用 HTML/CSS/JavaScript 在你的 Electron 应用的页面中添加自定义的 UI 元素,这些元素可以充当窗口的关闭、最小化和最大化按钮。

你可以使用 Electron 的 IPC(进程间通信)机制来监听这些按钮的点击事件,并使用 Electron 的 API 来控制窗口(如关闭、最小化或最大化)。

例如,你可以在渲染进程(renderer process)中添加一个关闭按钮,并通过 IPC 将点击事件发送到主进程(main process)。然后,在主进程中处理这个事件并关闭窗口。

渲染进程(renderer.html):

html 复制代码
<!DOCTYPE html>
<html>
<body>
  <button id="close-btn">关闭</button>

  <script>
    const { ipcRenderer } = require('electron')

    document.getElementById('close-btn').addEventListener('click', () => {
      ipcRenderer.send('close-window')
    })
  </script>
</body>
</html>

主进程(main.js):

javascript 复制代码
const { BrowserWindow, ipcMain } = require('electron')

let win = new BrowserWindow({ /* ... */ })

ipcMain.on('close-window', () => {
  win.close()
})
  1. 处理窗口拖动

由于你移除了默认的窗口边框,你可能还需要处理窗口的拖动。这可以通过监听鼠标事件并在适当的时候调用 Electron 的 move 方法来实现。

例如,你可以添加一个全屏的透明层,并在其上监听 mousedownmousemovemouseup 事件来模拟窗口的拖动。

请注意,这些只是基本的实现思路,并且可能需要根据你的具体需求进行调整。例如,你可能还需要处理窗口的最小化和最大化逻辑,以及可能的跨平台兼容性问题。

相关推荐
Boilermaker199222 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子33 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构