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