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] 

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