electron写的客户端自定义窗口拖拽直接在你的自定义头部样式中加上直接在你的自定义头部样式中加上直接在你的自定义头部

窗口拖拽实现

//直接在你的自定义头部样式中加上
-webkit-app-region: drag;

问题

1.会导致自定义头部的点击事件等失效

解决：给绑定点击事件的容器css样式加上-webkit-app-region: no-drag;

2.双击自定义头部，窗口会全屏放大和正常缩回

解决：在主进程中监听窗口大小，将是否窗口是否全屏值传递到渲染进程中

//主进程
 const win = new BrowserWindow({
    width: 1024,
    height: 600,
    frame: false,
    transparent: false,
    backgroundColor: 'rgba(0,0,0,0)',
    webPreferences: {
      nodeIntegration: true,
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
        contextIsolation: false,
        enableRemoteModule: true
    }
  })
  win.on('resize', () => {
    const isFullScreen = win.isMaximized();
    //这里可以使用单向通信就可以了
    win.webContents.send('windowChange', isFullScreen);
  });
  
  //渲染进程
  import { ipcRenderer} from 'electron';
     beforeMount() {
        ipcRenderer.on('windowChange', (event, message) => {
        //这里的isMax是控制图标切换的变量
            this.isMax = message
        });
    },