【Electron-vue】创建桌面应用（14）- 自定义Electron窗口

1.前言

上次将项目向同事展示了一下，算是electron-vue的第一阶段调研。但是演示的时候却被各种否定，窗体比较大，而且设计不合理，布局方式不合理，等等等。由于在此之前没有做过这种客户端的形式，所以设计也是无从说起。

于是经过一番的讨论，基本上确定了要做一个类似于QQ的客户端的产品，经过一番努力，终于搞得是差不多了，成品图如下：

主要解决的问题

1. 舍弃electron自带的窗体，自定义窗体
2. 通过事件监听解决最小化和隐藏托盘的功能
3. 无窗体下的拖拽功能实现

下面就开始我们的代码之旅。

2. 修改窗体

2.1 影藏窗体

参考文档 这里是对electron窗口属性的详细说明，可以参考一下。

BrowserWindow是一个EventEmitter。

它创建一个新的BrowserWindow具有原生属性的设置options。其中我们需要注意的是下面这几个重要的属性：

resizable布尔（可选） - 窗口是否可调整大小。默认是true
frame布尔（可选） -指定false创建一个无框窗口。默认是true

如果想影藏框架的窗体，可以设置frame:false即可。而且原则上我们的登陆窗口是不允许通过鼠标拖调整窗口的大小，所以需要设置resizable:false。

mainWindow = new BrowserWindow({
   
   height: 350,
   useContentSize: false,
   width: 400,
   resizable: false,
   frame: false
})

这样就可以去掉外层窗体，并且不可以进行放大缩小。但是这也导致一个问题，如果你选择不使用electron自带的frame，那么就默认你是放弃了frame的拖拽功能，所以这里需要我们自己去实现拖拽功能。

2.2 无窗体的拖拽功能

在开发应用的过程中，想要使得窗口在普通大小可以拖动，经常会设置该css属性：-webkit-app-region: drag; 来实现。

在窗口的最外层，即登录页面的根节点上设置该属性为drag，这样的话就可以实现窗口的拖拽，但是也会产生一个问题，一般会在最外层设置这个属性，那么在窗体的任意位置都可以进行拖拽。那我们的表单怎么办呢？

如果设置在最外层，那当我们的鼠标移动到输入框，按钮等操作事件上时，就会发现，不能获取到焦点，不能输入，也不能点击，这就很麻烦了。

而关于-webkit-app-region的属性设置也可以找到对应的解决办法，那就是在需要事件或者需要输入的地方设置该属性不能拖拽，即-webkit-app-region: no-drag;

于是，我就想到只要给表单一个div或者在表单的最外层设置这个属性为no-drag不就行了么？而事实并非如此，不明白有的表单项却不行，比如按钮，CheckBox，radio等这些，在我这里好像不能用。如果在form表单最外层不起作用，那只能退而求其次，每一项都这么设置。

这么一来，属性设置就显得很冗余了。如果在每一项都能这么设置，那么在行设置会不会起作用呢？

于是尝试了在.ant-row上进行设置，而不是在ant-input上设置。以下就是样式代码：

.login-container {
   
  width: 100vw;
  height: 100vh;
  font-size: 14px;
  -webkit-app-region: drag; //无边框下设置窗口可拖拽
  .login-top {
   
    position: relative;
    width: 100%;
    height: 80px;
    background-color: #179bbb;
    color: white;
    .left {
   
      float: left;
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
    }
    .right {
   
      float: right;
      .window-min,
      .window-close {
   
        width: 30px;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        text-align: center;
        -webkit-app-region: no-drag; //事件处可以禁用拖拽区域
      }
      .window-min:hover {
   
        background-color: rgb(209, 207, 207);
      }
      .window-close:hover {
   
        background-color: red;
      }
    }
    .logo {
   
      position: absolute;
      top: 40px;
      left: 160px;
      width: 80px;
    }
  }
  .login-form {
   
    width: 70vw;
    height: 150px;
    position: absolute;
    left: 15vw;
    top: 120px;
    .ant-row {
   
      margin-bottom: 0px;
      -webkit-app-region: no-drag; //事件处可以禁用拖拽区域
    }