操作系统原生的窗口样式中规中矩，看久了却难免会有些厌烦。所以在使用 electron 创建桌面应用的时候，有时候我们希望能完全掌控窗口的样式，而隐藏掉系统提供的窗口边框和标题栏等。
通过在创建窗口的时候，指定{frame:false}或{titleBarStyle: 'hidden'}(macOS only)即可达到隐藏边框的效果，甚至可以通过 {transparent:true}来指定窗口透明，创建异形的窗口呈现。具体可见官方文档，这里不再赘述。
一个值得一提的问题是窗口的拖动。因为没有标题栏，所以需要自行实现窗口的拖动区域，否则就没法移动窗口位置了。可能的实现方案有下面几种：
方案一： -webkit-app-region: drag;官方文档里有详细说明：
默认情况下, 无框窗口是 non-draggable 的。 应用程序需要指定 `-webkit-app-region: drag` 在 CSS 中告诉Electron哪个区域是可拖拽的 (像 OS 的标准标题栏), 并且应用程序也可以使用 `-webkit-app-region: no-drag` 来排除 draggable region 中的 non-draggable 区域。 请注意, 当前只支持矩形形状。
要使整个窗口可拖拽, 您可以添加 `-webkit-app-region: drag` 作为 `body` 的样式:
<body style="-webkit-app-region: drag"></body>
请注意, 如果您已使整个窗口draggable, 则必须将按钮标记为 non-draggable, 否则用户将无法单击它们:
button { -webkit-app-region: no-drag; }
如果你设置自定义标题栏为 draggable, 你也需要标题栏中所有的按钮都设为 non-draggable。
试下来拖拽效果很完美。但是，文档后面提到了这种方法较为致命的一个问题：
在某些平台上, 可拖拽区域将被视为 non-client frame, 因此当您右键单击它时, 系统菜单将弹出。 要使上下文菜单在所有平台上都正确运行, 您永远也不要在可拖拽区域上使用自定义上下文菜单。不仅右键菜单，设置了这个样式的元素几乎无法响应所有的鼠标事件，包括点击、拖拽等。如果需要拖拽整个窗口，就相当尴尬了。
方案二：通过响应页面的 mousemove 事件既然我们需要页面能够响应鼠标事件，那能不能就通过鼠标事件去解决问题呢？这是作为一名前端开发人员很容易想到的方案：通过网页的 mousemove 事件，我们可以得知当前鼠标在网页上的坐标，并与上一次的坐标进行比较，得出鼠标的位移数值。
然后，我们可以通过当前 electron 窗口上的 getPosition 方法获取窗口当前位置，加上鼠标位移得出新的位置，然后通过setPosition 方法手动移动窗口，达到拖动的效果。
是不是看上去很美？很可惜不能高兴得太早。网页上的两次 mousemove 事件之间有一定时间间隔，这个间隔对于桌面客户端编程来说有点太长了。这就导致在性能比较差的情况下，有可能出现这样的情况：鼠标移动过快，移出了窗口的范围，而下一次 mousemove 还没来得及触发。这样窗口就跟不上鼠标，“掉下来”了……
方案三：electron-drag在一度绝望的时候，发现了 electron-drag 这个库和它天才的想法：通过一个原生 Node.js 模块，跟踪鼠标在整个屏幕上的位移，然后手动设置窗口的位置。
这个库只在 Windows 和 macOS 下可用，不支持 Linux。因此，在不支持的平台上，需要使用方案一或者方案二进行容。
一个小插曲在 Windows 上引用 electron-drag 时可能会抛出 Uncaught Error: A dynamic link library (DLL) initialization routine failed 的错误（macOS 上暂未遇到，不确定是否也有）。这是因为该库使用 win-mouse 和 osx-mouse 这两个原生模块进行鼠标位置的追踪，而 electron 和系统中安装的 Node.js 程序头文件未必相同，要使用原生模块必须使用正确版本的头文件进行编译。解决方式是安装 electron-rebuild 重新编译对应的模块。Windows 下的操作如下：
electron-rebuild -f -w win-mouse最后上代码(TypeScript)：
export function makeDraggable(el: HTMLElement | string) {
if (typeof el === 'string') { el = document.querySelector(el) as HTMLElement; }
try {
const drag = require('electron-drag');
if (drag.supported) {
drag(el);
} else {
makeDraggableFallback(el);
}
} catch (ex) {
makeDraggableFallback(el);
}
}
function makeDraggableFallback(el: HTMLElement) {
// 方案一
// el.style['-webkit-app-region'] = 'drag';
// 方案二
let dragging = false;
let mouseX = 0;
let mouseY = 0;
el.addEventListener('mousedown', (e) => {
dragging = true;
const { pageX, pageY } = e;
mouseX = pageX;
mouseY = pageY;
});
window.addEventListener('mouseup', () => {
dragging = false;
});
window.addEventListener('mousemove', (e: MouseEvent) => {
if (dragging) {
const { pageX, pageY } = e;
const win = require('electron').remote.getCurrentWindow();
const pos = win.getPosition();
pos[0] = pos[0] + pageX - mouseX;
pos[1] = pos[1] + pageY - mouseY;
win.setPosition(pos[0], pos[1], true);
}
});
}
备注：
收藏
淘帖
踩
