Electron 设置-webkit-app-region: drag;实现拖拽后, 无法响应鼠标划过事件及点击事件的解决方式

最近使用electron+Vue+elementUI开发一个cs端项目,遇到了一些问题,现整理一下。

1.在开发 Electron 应用的过程中,想要使得窗口在普通大小可以拖动,于是设置给 title-bar css 如下:

.header {

-webkit-app-region: drag;

}

但设置了这个属性后,发现在header上点击缩小和 关闭 的功能又废了,现象如图:

怎么解决呢?

网上有2种解决办法

  1. 拖动不要用 -webkit-app-region 了,自己监听 mouseDown 和 mouseUp 来实现吧

  2. 父元素设置 -webkit-app-region: drag, 子元素 -webkit-app-region: no-drag 即可

    我这边采用的是第二种方法解决了次问题。

相关推荐
hunter_0762 小时前
从零读懂 SwiftUI 新拖放 API:用 Apple 的纸牌示例理解排序、多项拖拽与移动规则
前端
程序猿阿森2 小时前
深入解析 NLI:RAG 与大模型防幻觉的“最后一道防线”
前端·人工智能·算法
专业程序开发源3 小时前
springboot校企合作双选会一站式预约与面试系统16010-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·面试·php·课程设计
iCxhust4 小时前
模型:500kW飞轮 10kV输电线路 油田抽油机 同时考虑无功补偿 统计:全年节电量 结果56万度电
前端·css·css3·电力·飞轮
志尊宝4 小时前
AI原生前端开发(011):Chrome 148+内置Gemini Nano入门
前端·chrome·ai-native
Liu.7744 小时前
uniapp swiper 常见问题及修复
前端·uni-app
u0111026754 小时前
图片生成任务的日志记录与敏感信息取舍
前端·图像处理·算法·ai作画
凯凯姜4 小时前
Vue 3 深入学习笔记 16:API 请求封装与统一错误处理
vue.js·笔记·学习