electron-vue 窗口拖动

electron-BrowserWindow 窗口拖拽
1,将要移动的区域添加拖动事件 @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 初始的BrowserWindow窗口
  mainWindow && mainWindow.setPosition(res.appX,res.appY)
})

使用@mousedown,@mouseup,@mousemove分别创建三个方法实现会出现鼠标快速移动的时候出现框卡住。
所以只能使用原生js来解决

你可能感兴趣的:(electron-vue 窗口拖动)