如何启用在 Electron 和 Svelte 中移动无框 window 的功能？

Question

我正在关注 this article 来设置 Electron 和 Svelte。

我想让我的 window 无框架，所以我在 index.js 中启用了 frame: false，它成功运行并且没有标题栏。

根据this Whosebug answer，要启用移动，我需要使用：

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

但这不起作用，我无法拖动任何东西。整个 Svelte 代码：

<main>
   <h1>Hello</h1>
</main>
<style>
    main {
        --webkit-user-select: none;
        --webkit-app-region: drag;
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Answer 1

原来我需要补充：

* {
        -webkit-user-select: none;
        -webkit-app-region: drag;
    }

到我的 Svelte 应用程序，然后使用 -webkit-app-region: no-drag !important; 处理不应拖动的内容，例如按钮。

如何启用在 Electron 和 Svelte 中移动无框 window 的功能？

How do I enable the ability to move a frameless window in Electron and Svelte?

javascript

css

electron

svelte