electron程序中,总是有人要隐藏原本的标题栏,然后自己模拟一个标题栏出来。那么在模拟这个标题栏的过程中,会用到几个非常罕见的css属性,在本文中,苏南大叔对这些罕见css属性做个总结。而且这里提前说一句,通过css模拟出来的标题栏,在win系统下面,右键就是有默认的系统菜单。无法屏蔽,无法屏蔽,无法屏蔽。除非不用这种css方式定义可拖动区域!

苏南大叔:electron程序,自定义标题栏的几个特殊css属性总结 - electron-bar-css
electron程序,自定义标题栏的几个特殊css属性总结(图3-1)

好了,下面进入正文。本文测试环境:macelectron@6.0.0。话说,这个electron都开始进入6时代了,太快了。本文中,描述的就是个极其粗糙的模拟标题栏的div,以及应用在这个模拟div上面的特殊css

-webkit-app-region: drag;

这个dragcss属性,就是这个需求中最基础最基础的关键解决方案了。在frame:falseelectron程序中,在渲染进程中定义了这条cssdom元素,就具有可以拖动的特性。当然,备受争议的win右键菜单,也是在这里出现的。

-webkit-app-region: drag

对应元素上,不能响应自定义鼠标事件。除了系统拖动功能外,还有双击全屏功能。在win下面,右键后,还会有特殊的系统菜单出现。

苏南大叔:electron程序,自定义标题栏的几个特殊css属性总结 - electron-bar-drag
electron程序,自定义标题栏的几个特殊css属性总结(图3-2)

-webkit-app-region: no-drag

本条css,一般来说,是定义在dragdom元素内部的。定义了no-drag的元素及其子元素都会恢复普通的网页元素表现,不会具有拖动的功能。

-webkit-app-region: no-drag;

苏南大叔:electron程序,自定义标题栏的几个特殊css属性总结 - electron-bar-nodrag
electron程序,自定义标题栏的几个特殊css属性总结(图3-3)

同时,no-drag的元素,也会恢复响应鼠标事件的功能。比如可以响应:hovercss定义,比如响应jsclick事件等。这也是很多人问起的,为啥模拟的关闭按钮不能点击了,鼠标移动上效果没用等等问题的解决方案。

-webkit-user-select: none

user-select: none这个设置,主要是用于解决拖动的时候,模拟标题栏上的文字会被误操作,全选的问题。标题栏上的问题被全选了,是蛮尴尬的。

-webkit-user-select: none

pointer-events: none

定义了drag的元素内部,其实默认都是不响应鼠标事件的。特殊的元素,需要再次定义no-drag。而对于是否响应鼠标事件这件事来说,在css中,其实是有专门的属性的,那就是:pointer-events。这个pointer-events属性的可选值非常多,但是对于大家来说,目前可能也许只会用得到none,就是不响应鼠标事件。

pointer-events: none

对于electron模拟标题栏这个需求来说,这个pointer-events,用到的概率不是很大。

相关文章

《electron 如何实现圆角不规则窗体?》

总结

对于模拟标题栏这件事来说,最简单的方案就是css定义drag了。但是涉及到无法解决的win下面的右键菜单问题,所以也许有人会选择electron-drag这个第三方库。

苏南大叔个人认为,鉴于编译第三方库的时候,极大概率会失败。所以,还是选用更保险的drag方案比较好些。更多electron相关经验文字,请点击苏南大叔的博客文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: