使用 electron 构建桌面应用(拖动控制篇)_lonely,lonelyburning-编程思维

使用 Electron 构建桌面应用(拖动控制篇)

当窗口被定义了大小,我们也就是在自定义这个窗口,使得它不可拉伸没有框架,让它看起来就像一个真正的声效器浮在桌面上。

现在问题来了 – 要如何移动或者关闭一个没有标题栏的窗口。

很快我就会说到自定义窗口(和应用)的关闭动作,还会谈到如何在主进程和渲染器进程中通信。不过现在让我们先把目光聚焦到“拖拽效果”上。你可以在 app/css 目录下找到 index.css 文件:

 

html,
body {
    ...
    -webkit-app-region: drag;
    ...
}

-webkit-app-region: drag;把整个 html 都变成了一个可拖拽的对象。现在问题来了,在可拖拽的对象上你怎么点击啊?!好的,可能你会想到把 html 中某个部分的这个属性值设置为no-drag;,那就允许该元素不可拖拽(但可以点击了)。让我们想想下面这段 index.css 片段:

 

.button-sound {
    ...
    -webkit-app-region: no-drag;
}

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/sxz2008/p/6805484.html