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 事件来模拟窗口的拖动。

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

相关推荐
活宝小娜24 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点27 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow28 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o29 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic1 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年3 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder3 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727573 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart3 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter