Electron去掉边框(标题栏)并设定可拖动

迁移软件到vue平台【之前是angular平台】后发现有个问题是windows系统下title标签栏无法关闭，所以就找了下文章，找到个老文章，发出来记录下

问题描述

在使用Electron进行桌面应用开发时，为了美观往往会去掉窗口边框；

但是，去掉边框之后，窗口的拖动功能就出现了问题。

解决方案

通过查询Electron的API：Frameless Window可得到一下解决方法。

1. Frameless Window–去掉窗口边框

如下代码所示：frame: false 参数用来设置无边框；

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600, frame: false})
win.show()

以下代码用于在Html元素中设置可拖动区域；
其中，style=”-webkit-app-region: drag;” 用于设定该部分为可拖动区域；
而， style=”-webkit-app-region: no-drag;” 用于设定该部分为不可拖动区域；
这两种样式可分别加载嵌套的Html元素中，以便实现可拖动区域与不可拖动区域(功能区域)的精准划分。

<header style="-webkit-app-region: drag">
    <section style="-webkit-app-region: no-drag">
        <!--html代码-->
    </section>
    <section>
        <!--html代码-->
    </section>
    <section style="-webkit-app-region: no-drag">
        <!--html代码-->
    </section>
</header>

引用：Electron – Frameless Window