Electron 无边框窗口开启全局拖拽

本文介绍了如何在 Electron 无边框窗口中实现全局拖拽功能。通过使用 -webkit-app-region: drag 和 -webkit-app-region: no-drag CSS 样式,可以指定拖拽区域和排除特定元素。当整个窗口设置为可拖拽时,须确保点击元素添加 no-drag 类以保持可点击性。此外,讨论了在 Vue.js 应用中简化这一过程的可能方法,如拦截事件注册、编写自定义指令或扩展修饰符。
摘要由CSDN通过智能技术生成

背景

最近有个需求,Electron 打开的窗口要实现拖拽功能,大概看了一眼 BrowserWindow 的 API 却只找到了一个 move 事件,这个事件默认是针对有边框窗口的,也即 frame: true 的窗口。

本来打算直接使用 drag API 来写,偶然翻到了以下 API:无边框窗口

其中提到了可拖拽区的概念,即可以将一个矩形区域设置成可拖拽区域,具体文档如下:

文档原文

默认情况下, 无边框窗口是不可拖拽的。应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的(如操作系统的标准标题栏),在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除。请注意, 当前只支持矩形形状。

注意: -webkit-app-region: drag 在开发人员工具打开时会出现问题。查看更多信息 (包括变通方法), 请参见此 GitHub 问题 。

要使整个窗口可拖拽, 您可以添加 -webkit-app-region: drag 作为 body 的样式:

<body style="-webkit-app-region: drag">
</body>

请注意,如果您使整个窗口都可拖拽,则必须将其中的按钮标记为不可拖拽,否则用户将无法点击它们:

button {
  -webkit-app-region: no-drag;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值