electron-BrowserWindow 窗口拖拽
1,将要移动的区域添加拖动事件 @mousedown
<div @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 初始的BrowserWindow窗口
mainWindow && mainWindow.setPosition(res.appX,res.appY)
})
使用@mousedown,@mouseup,@mousemove分别创建三个方法实现会出现鼠标快速移动的时候出现框卡住。
所以只能使用原生js来解决