electron-vue实现自定义区域拖拽窗口

使用@mousedown，@mouseup，@mousemove分别创建三个方法实现会出现鼠标快速移动的时候出现框卡住。

所以只能使用原生js来解决

 

1，标签看你用的哪个UI框架，事件只加这一个即可，然后这个你想在哪个区域实现拖动事件 @mousedown 就放在哪里

<v-btn  @mousedown="mousedown" />

2，然后是data部分

data () {
   return {
       isKeyDown:false,
       dinatesX:0,
       dinatesY:0,
   }
},

3，调用的方法（渲染进程中的方法，其实也就是vue页面中）

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
            //给主进程传入坐标
            this.$electron.ipcRenderer.send('move-application',{
                appX:x,
                appY:y
              })
          }
      };
      document.onmouseup = (ev) => {
          this.isKeyDown = false
      };
}

4，主进程方法，例如：background.js

ipcMain.on('move-application',(event,res) => {
  mainWindow && mainWindow.setPosition(res.appX,res.appY)
})

 

这时就可以了，完成。