electron+vue虚拟桌面开发遇坑之透明窗口鼠标穿透

最近开发一个项目，使用electron做了一个虚拟桌面，按需要显示一部分内容，遮挡在桌面上方，其它地方则需要透明显示，同时能够操作原桌面程序以及操作electron虚拟桌面的内容。

在设置了electron虚拟桌面透明后需要能够点击使用原桌面的程序，按照electron官方文档设置

const { BrowserWindow } = require('electron')
let win = new BrowserWindow()
win.setIgnoreMouseEvents(true)

此时能够穿透electron程序点击桌面，但是不能对electron程序进行操作；文档中给了我们“转发”功能，代码如下

let win = require('electron').remote.getCurrentWindow()
let el = document.getElementById('clickThroughElement')
el.addEventListener('mouseenter', () => {
  win.setIgnoreMouseEvents(true, { forward: true })
})
el.addEventListener('mouseleave', () => {
  win.setIgnoreMouseEvents(false)
})

但是这里又遇到了问题，因为vue的DOM问题，无法获取到除APP以外的其他DOM节点，获取到的el会一直提示为null，在仔细查看了vue的生命周期后发现想要获取需要的DOM节点需要在mounted中获取，重点来了

先用remote.getCurrentWindow()获取electron当前窗口

const win = require('electron').remote.getCurrentWindow()

然后在mounted中获取DOM节点成功，执行程序后，当鼠标离开content区域后可以操作原桌面上的程序，当鼠标进入content的内容区域后就可以操作electron程序的内容 

mounted () {
    let el = document.getElementById('content')
    console.log(el)
    el.onmouseenter = function () {
      win.setIgnoreMouseEvents(false)
    }
    el.onmouseleave = function () {
      win.setIgnoreMouseEvents(true, { forward: true })
    }
  },