electron vue 透明桌面事件穿透

electron 透明桌面事件穿透

网上有很多方式都不怎么理想，这里有个新方式

我这里用到了remote  ,引用的包是  @electron/remote

在主流程main.js下引用

import { screen } from 'electron'

ipcMain.handle('get-screen-point', () => screen.getCursorScreenPoint());

 

在渲染流程中，这里是vue

import { ipcRenderer } from 'electron'
import { BrowserWindow } from '@electron/remote'
const win = BrowserWindow.getFocusedWindow()

let t = null

  mounted () {
    window.addEventListener('mousemove', event => {
      this.handleMouseMov(event, this)
    });
  },
  methods: {
    getScreenPoint: () => {
      return ipcRenderer.invoke('get-screen-point')
    },

    handleMouseMov: (e, _this) => {
      console.log(e, document)
      if (e.target === document.documentElement) {
        win.setIgnoreMouseEvents(true);

        if (t) clearInterval(t);
        t = setInterval(async () => {
          _this.getScreenPoint().then(point => {
            const elem = document.elementFromPoint(
              Math.floor(point.x),
              Math.floor(point.y)
            );

            if (elem !== document.documentElement) {
              win.setIgnoreMouseEvents(false);
              clearInterval(t);
            }
          })
        }, 150);
      }
      else {
        win.setIgnoreMouseEvents(false);
      }
    }
  },

 

在样式中

body,html{
  pointer-events: none
}

// 不穿透层
#noPo{
  pointer-events: auto;
}