不到断气不罢休 发表于 2022-8-9 14:46:03

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;

 
 

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: electron vue 透明桌面事件穿透