Electron的使用笔记之自定义窗口

无边框窗口

要创建无边框窗口需要在构造函数中设置frame为false。

在主线程main文件夹index.js里面。

import { BrowserWindow} from 'electron';
const win = new BrowserWindow({ frame: false })

设置自定义拖动区域

要使整个窗口可拖拽,

可以在需要拖拽的元素添加以下样式

-webkit-app-region: drag

如果在窗口的边缘元素添加上面的样式，此时边缘就不能用鼠标对窗口大小进行调节。

因此需要给窗口的边缘div设置一下样式。

-webkit-app-region: no-drag

示例：

  <div class="drag">
       <div class="dragCorner"></div>
       <div class="dragleftSide"></div>
       <div class="dragTopSide"></div>
  </div>

.drag {
    //electron自带的功能，添加此样式就可以对部分元素进行拖拽
    -webkit-app-region: drag;
    height: 67px;
    width: 100%;
    position: relative;
    //左边缘
    .dragleftSide {
      width: 5px;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      -webkit-app-region: no-drag;
    }
    //上边缘
    .dragTopSide {
      width: 100%;
      height: 5px;
      position: absolute;
      left: 0;
      top: 0;
      -webkit-app-region: no-drag;
    }
    //左上角边缘
    .dragCorner {
      width: 5px;
      height: 5px;
      position: absolute;
      left: 0;
      top: 0;
      -webkit-app-region: no-drag;
    }
}