electron 无边框模式最小化后hover状态依然存在的BUG解决方案

最新推荐文章于 2024-07-17 09:39:56 发布

大专代码高手

最新推荐文章于 2024-07-17 09:39:56 发布

阅读量209

点赞数

文章标签： electron bug javascript 前端 vue

本文链接：https://blog.csdn.net/qq_41640247/article/details/131408481

版权

我写了个登录界面如下

当点击最小化时，重新打开仍然是hover状态,虽然这个BUG很早就被提出了，但官方说已经修复了，但还是存在。

一个不放弃无边框模式的解决方案：使用CSS和javascript简单几行代码解决

本人使用的是vue框架

<template>
  <div class="loginmanu">
    <div class="icondiv">
      <i class="iconfont icon-zuixiaohua" id="xiaohua" :class="{ manuicon: tclass }" @click="handlehide"></i>
      <i class="iconfont icon-guanbi1 manuicon" @click="handlequit" ref="logma"></i>
    </div>
    <router-view></router-view>
  </div>
</template>

这里动态给最小化图标赋予类manuicon 默认为true

这是CSS部分 manuicon使得图标hover时背景变色

.icondiv {
    display: flex;
    justify-content: flex-end;
    color: white;
    // padding: 8px;
    & > i {
      @include drag(false);
      padding: 6px;
      cursor: pointer;
    }
    .manuicon {
      &:hover {
        background-color: #858585;
      }
    }
  }

这是js部分

let tclass = ref(true)
function handlehide() {
  window.api.hideapp()  //最小化窗口
  tclass.value = false  //从图标的类中除去hover的效果
  let loginmanu = document.querySelector('.icondiv') //获取图标所在的div，当然你直接获取图标也行
  loginmanu.addEventListener('mousemove',()=>{
    tclass.value = true
    loginmanu.removeEventListener('mousemove',()=>{
    })
  })
  //这里监听鼠标在上面移动时 使他恢复hover的效果 然后删去这个监听。也可以使用鼠标移入事件，个人觉得使用mousemove稳健一点

不管你用的什么框架，思想就是给他hover的类进行动态赋值，最小化的时候移出，鼠标移入时增加。

问题解决