VUE+ELECTRON无边框窗口拖动和自定义拖动

一、设置自定义可拖动区域

在class添加-webkit-app-region: drag或者style中，实现窗口拖动

.css{
        -webkit-app-region: drag;
}

使用该方式会导致该区域内的鼠标事件以及点击事件失效

二、自定义拖动

主进程

import {
    app,
    protocol,
    BrowserWindow,
    ipcMain,
} from 'electron'

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

渲染层

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

<script>
const { ipcRenderer } = require('electron')
export default {
    data() {
        return {
           isKeyDown:false,
           dinatesX:0,
           dinatesY:0,
        }
    },
    //创建后
    created(){
        
    },
    //载入后
    mounted(){
        
    },
    methods: {
        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
              };
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    
</style>

效果