首先electron需要设置无边框和背景透明
src/main/index.js :

frame:false,
transparent:true,

页面示例

<template>
  <div >
    <div id="test">
      hello
    </div>
  </div>
</template>

<script> let win = require('electron').remote.getCurrentWindow() export default { name: 'landing-page', components: { }, mounted(){ let el = document.getElementById('test') el.addEventListener('mouseenter', () => { console.log("enter") win.setIgnoreMouseEvents(false) }) el.addEventListener('mouseleave', () => { win.setIgnoreMouseEvents(true, { forward: true }) }) } } </script>

<style > #test{ width: 200px; height: 200px; background-color: aqua; border-radius: 50%; } </style>



效果展示:
如图,设置了一个圆形的div(border:50%),其透明区域事件会传到后面的应用。比如鼠标放在箭头所处位置,后面的vs code回响应。