vue-electron 无边框窗口位置跟随鼠标

你应该知道 -webkit-app-region: drag;可以拖拽无边框的窗口，但是，窗口并不会时刻跟随鼠标，只有鼠标松开后，窗口才会移位。
这里提供一种方法

export const windowMove = (win: any, channel: string) => {
  let winStartPosition = { x: 0, y: 0 }
  let mouseStartPosition = { x: 0, y: 0 }
  let movingInterval: any = null
  /**
   * 窗口移动事件
   */
  ipcMain.on(channel, (events, 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
    }
  })
}

在创建窗口时候调用
例如：第一个参数是窗口，第二个是监听的channel

  windowMove(subtitleWindow, 'win-move-subtitle')

创建指令,方便多个窗口使用，如果只有一个，可不必使用指令

import { DirectiveOptions } from 'vue'
const { ipcRenderer } = window.require('electron')

export const move: DirectiveOptions = {
  inserted: function (el: any, bindng: any) {
    if (el) {
      const channel = bindng.value
      el.addEventListener('mousedown', () => {
        ipcRenderer.send(channel, true)
      })
      el.addEventListener('mouseup', () => {
        ipcRenderer.send(channel, false)
      })
      //右键停止鼠标跟随，防止意外
      el.addEventListener('contextmenu', () => {
        ipcRenderer.send(channel, false)
      })
    }
  }
}

使用时，直接使用v-move=“xxxx”

如果频繁创建关闭窗口 记得关闭窗口是清除监听

/** 移除监听 channel 对应v-move 指令值*/
export const windowRemoveListener = (channel: string) => {
  ipcMain.removeAllListeners(channel)
}

仅提供一个思路，具体使用视情况而定。