Electron窗口调整

1 【默认】有标题栏，有标题

2 有标题栏，无标题 

缺点 : 只有上面可拖拽

主进程设置：

问题：窗口就无法拖拽了，解决方案为：渲染进程添加样式 

<template>
  <div>
    <div class="app"></div>
    <router-view></router-view>
  </div>
</template>
<style lang="scss">
.app {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  height: 30px;
  width: 100%;
  -webkit-app-region: drag;  //主要添加的样式
}
</style>

3 无标题栏，无标题 

主进程设置：

问题：窗口无法拖拽，解决方案：渲染进程通信主进程，采用拖拽的形式完成

<div class="button" @mousedown="mousedown"></div>

<script lang="ts" setup>
import { ref } from 'vue'
let isKeyDown = ref<boolean>(false)
let dinatesX = ref<number>(0)
let dinatesY = ref<number>(0)
const mousedown = (event) => {
  isKeyDown.value = true
  //  记录鼠标按下时的初始坐标 
  dinatesX.value = event.x
  dinatesY.value = event.y
  document.onmousemove = (ev) => {
     //  判断 isKeyDown 状态： 如果鼠标仍然按下（isKeyDown.value === true），
     //  计算鼠标移动的偏移量 x 和 y，
     //  分别为当前鼠标的屏幕坐标 (ev.screenX, ev.screenY) 
     //  减去按下时的初始坐标。
    if (isKeyDown.value) {
      const x = ev.screenX - dinatesX.value
      const y = ev.screenY - dinatesY.value
      //给主进程传入坐标
      let data = {
        appX: x,
        appY: y
      }
      // 传递数据到 Electron 主进程
      electron.ipcRenderer.invoke('custom-adsorption', data) //data传递给主进程
    }
  }
  // 鼠标松开 结束拖拽
  document.onmouseup = () => {
    isKeyDown.value = false
  }
}
// 微信登录
const wxLogin = () => {
  window.electron.ipcRenderer.invoke('renderer-to-main', {
    name: 'wx',
    event: 'event',
    data: null
  })
}
</script>

主进程

ipcMain.handle('custom-adsorption',(event,res) => {
    let x = res.appX;
    let y = res.appY;
    mainWindow.setPosition( x , y )
})

另外想要无法调整窗口大小 

主进程中resizable: false, // 无法放大缩小窗口