electron拖拽窗口

最近工作需求利用electron开发桌面应用，这里记录一下遇到的问题

拖拽方法实现有如下：

1、使用 drag 样式，给窗口内所有需要拖动的元素增加 -webkit-app-drag: drag，这时候就可以拖动了。

注意，父节点增加了这个样式之后，子节点不响应任何鼠标事件。还有一个问题就是，鼠标右键会出现一个系统菜单。

2、页面监听 mouse 事件，然后设置窗口位置。

实现方式

const { screen, ipcMain } = require("electron");

function windowMove(win) {

  let winStartPosition = {x: 0, y: 0};
  let mouseStartPosition = {x: 0, y: 0};
  let movingInterval = null;

  /**
   * 窗口移动事件
   */
  ipcMain.on("window:move", (_, canMoving) => {
    if (canMoving) {
      // 读取原位置
      const winPosition = win.getPosition();
      winStartPosition = { x: winPosition[0], y: winPosition[1] };
      mouseStartPosition = screen.getCursorScreenPoint();
      // 清除
      if (movingInterval) {
        clearInterval(movingInterval);
      }
      // 新开
      movingInterval = setInterval(() => {
        // 实时更新位置
        const cursorPosition = screen.getCursorScreenPoint();
        const x = winStartPosition.x + cursorPosition.x - mouseStartPosition.x;
        const y = winStartPosition.y + cursorPosition.y - mouseStartPosition.y;
        win.setPosition(x, y, true);
      }, 20);
    } else {
      clearInterval(movingInterval);
      movingInterval = null;
    }
  });

}

module.exports = windowMove;

界面这边触发事件的代码(electron/index.js)

windowMove(canMoving){
  window.ipcRenderer.send('window:move', canMoving);
}

界面调用

<script setup>
const onMouseUp = ()=>{
  electron.windowMove(false);
}
const onMouseDown = (e)=>{
  if(e.button==2){
    electron.windowMove(false);
    return
  }
  electron.windowMove(true);
}

</script>

<template>
    <div class="app" @mousedown="onMouseDown" @mouseup="onMouseUp">
      app
    </div>
</template>