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 })
    }
  },