electron-vue 指定区域点击穿透

最新推荐文章于 2025-08-15 11:51:27 发布

原创最新推荐文章于 2025-08-15 11:51:27 发布 · 3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GUI 专栏收录该内容

13 篇文章

订阅专栏

在 Electron-Vue 应用中，通过设置无边框和背景透明，可以实现指定区域的点击穿透效果。文章展示了如何在 `src/main/index.js` 中配置，并给出了页面示例，说明透明区域的事件会传递到应用后台，如图中箭头所示，当鼠标位于圆形div的透明部分时，VS Code等后台应用能够接收到鼠标事件。

首先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>