本文介绍了如何在 Electron 无边框窗口中实现全局拖拽功能。通过使用 -webkit-app-region: drag 和 -webkit-app-region: no-drag CSS 样式，可以指定拖拽区域和排除特定元素。当整个窗口设置为可拖拽时，须确保点击元素添加 no-drag 类以保持可点击性。此外，讨论了在 Vue.js 应用中简化这一过程的可能方法，如拦截事件注册、编写自定义指令或扩展修饰符。
背景
最近有个需求，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;
}
最低0.47元/天 解锁文章
扫一扫
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
