Open hunter-ji opened 3 years ago
采用无边框就自然导致拖动问题,因此需要手动去设置可拖动区域。
设置可拖动区域也会出现新的问题,如果可拖动区域上存在其他元素的事件问题。在mac上直接设置一块可拖动区域即可,而windows就会出现可拖动区域上其他元素的事件被拖动事件覆盖掉了。因此还需要对其他元素设置不可拖动。
默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的(如操作系统的标准标题栏),在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除。 请注意, 当前只支持矩形形状。
-webkit-app-region: drag
-webkit-app-region: no-drag
要使整个窗口可拖拽, 您可以添加 -webkit-app-region: drag 作为 body 的样式:
body
<body style="-webkit-app-region: drag"> </body>
请注意,如果您使整个窗口都可拖拽,则必须将其中的按钮标记为不可拖拽,否则用户将无法点击它们:
button { -webkit-app-region: no-drag; }
.menu { -webkit-app-region: drag; } .menu-button { -webkit-app-region: no-drag; }
简述
采用无边框就自然导致拖动问题,因此需要手动去设置可拖动区域。
设置可拖动区域也会出现新的问题,如果可拖动区域上存在其他元素的事件问题。在mac上直接设置一块可拖动区域即可,而windows就会出现可拖动区域上其他元素的事件被拖动事件覆盖掉了。因此还需要对其他元素设置不可拖动。
官方文档
默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定
-webkit-app-region: drag
来告诉 Electron 哪些区域是可拖拽的(如操作系统的标准标题栏),在可拖拽区域内部使用-webkit-app-region: no-drag
则可以将其中部分区域排除。 请注意, 当前只支持矩形形状。要使整个窗口可拖拽, 您可以添加
-webkit-app-region: drag
作为body
的样式:请注意,如果您使整个窗口都可拖拽,则必须将其中的按钮标记为不可拖拽,否则用户将无法点击它们:
实现
参考文档