electron取消原生菜单后自定义拖拽:方法二(CSS设置可拖拽区域,推荐)

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, 因此当您右键单击它时, 系统菜单将弹出。 要使上下文菜单在所有平台上都正确运行, 您永远也不要在可拖拽区域上使用自定义上下文菜单。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注