VUE+ELECTRON模拟窗口吸附效果

APP.VUE

        mounted() {
            document.body.addEventListener('mouseenter', res => {
                ipcRenderer.send('adsorbent')
            })
            document.body.addEventListener('mouseleave', res => {
                console.log('离开窗体')
                ipcRenderer.send('adsorptionEcho')
            })
        },

渲染层

  <div class="hello" @mousedown="mousedown">
      HelloWorld
  </div>

        mousedown(e){
              this.isKeyDown = true 
              this.dinatesX = e.x
              this.dinatesY = e.y
                
              document.onmousemove = (ev) => {
                  if(this.isKeyDown){
                    const x = ev.screenX - this.dinatesX
                    const y = ev.screenY - this.dinatesY
                    //给主进程传入坐标
                    let data = {
                        appX:x,
                        appY:y
                    }
                    ipcRenderer.send('custom-adsorption',data)
                  }
              };
              document.onmouseup = (ev) => {
                  this.isKeyDown = false
              };
        },

主进程

//adsorbent  
ipcMain.on('adsorbent', (e, data) => { 
    if(adsorptiveState && win.getPosition()[0] == 1910){
        win.setPosition(1300,win.getPosition()[1]);
        adsorptiveState = false
    }
})
 
//adsorptionEcho 
ipcMain.on('adsorptionEcho', (e, data) => { 
    if(!adsorptiveState && windowStatus && win.getPosition()[0] == 1300){
        win.setPosition(1910,win.getPosition()[1]);
        adsorptiveState = true
    }
})

//吸附
ipcMain.on('custom-adsorption',(event,res) => {
    let x = res.appX;
    let y = res.appY;
    console.log(x,y)
    if(x > 1500 && !adsorptiveState){
        win.setPosition(1910,y); 
        adsorptiveState = true
        windowStatus = true
    } else{
        if(!adsorptiveState){
            win.setPosition(res.appX,res.appY)
        }
    }
})

效果

预览效果.gif