electron取消原生菜单后自定义拖拽:方法二(CSS设置可拖拽区域,推荐)这个也是官方示例中的办法。
官方地址https://www.electronjs.org/zh/docs/latest/tutorial/window-customization#设置自定义可拖动区域
设置自定义可拖动区域
默认情况下, 无边框窗口是不可拖拽的。 应用程序需要在 CSS 中指定 -webkit-app-region: drag
来告诉 Electron 哪些区域是可拖拽的(如操作系统的标准标题栏),在可拖拽区域内部使用 -webkit-app-region: no-drag
则可以将其中部分区域排除。 请注意, 当前只支持矩形形状。
要使整个窗口可拖拽, 您可以添加 -webkit-app-region: drag
作为 body
的样式:
styles.css
body {
-webkit-app-region: drag;
}
请注意,如果您使整个窗口都可拖拽,则必须将其中的按钮标记为不可拖拽,否则用户将无法点击它们:
styles.css
button {
-webkit-app-region: no-drag;
}
如果只将自定义标题栏设置为可拖拽,还需要使标题栏中的所有按钮都不可拖拽。
提示:禁用文本选择
创建可拖拽区域时,拖拽行为可能与文本选择相冲突。 例如,当您拖动标题栏时,您可能不小心选中其中的文本。 为了避免这种情况,您需要在可拖拽区域中禁用文本选择,像这样:
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
提示:禁用上下文菜单
在某些平台上, 可拖拽区域将被视为non-client frame, 因此当您右键单击它时, 系统菜单将弹出。 要使上下文菜单在所有平台上都正确运行, 您永远也不要在可拖拽区域上使用自定义上下文菜单。