qidao123.com技术社区-IT企服评测·应用市场

标题: electron vue 透明桌面事件穿透 [打印本页]
作者: 不到断气不罢休    时间: 2022-8-9 14:46
标题: electron vue 透明桌面事件穿透
electron 透明桌面事件穿透

网上有很多方式都不怎么理想，这里有个新方式
我这里用到了remote  ,引用的包是  @electron/remote
  1. 在主流程main.js下引用
  3. import { screen } from 'electron'
  5. ipcMain.handle('get-screen-point', () => screen.getCursorScreenPoint());
复制代码
 
  1. 在渲染流程中，这里是vue
  3. import { ipcRenderer } from 'electron'
  4. import { BrowserWindow } from '@electron/remote'
  5. const win = BrowserWindow.getFocusedWindow()
  7. let t = null
  9.   mounted () {
  10.     window.addEventListener('mousemove', event => {
  11.       this.handleMouseMov(event, this)
  12.     });
  13.   },
  14.   methods: {
  15.     getScreenPoint: () => {
  16.       return ipcRenderer.invoke('get-screen-point')
  17.     },
  19.     handleMouseMov: (e, _this) => {
  20.       console.log(e, document)
  21.       if (e.target === document.documentElement) {
  22.         win.setIgnoreMouseEvents(true);
  24.         if (t) clearInterval(t);
  25.         t = setInterval(async () => {
  26.           _this.getScreenPoint().then(point => {
  27.             const elem = document.elementFromPoint(
  28.               Math.floor(point.x),
  29.               Math.floor(point.y)
  30.             );
  32.             if (elem !== document.documentElement) {
  33.               win.setIgnoreMouseEvents(false);
  34.               clearInterval(t);
  35.             }
  36.           })
  37.         }, 150);
  38.       }
  39.       else {
  40.         win.setIgnoreMouseEvents(false);
  41.       }
  42.     }
  43.   },
复制代码
 
  1. 在样式中
  3. body,html{
  4.   pointer-events: none
  5. }
  7. // 不穿透层
  8. #noPo{
  9.   pointer-events: auto;
  10. }
复制代码
 
 
[code][/code] 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/) Powered by Discuz! X3.4