本节将会通过两个案例介绍如何实现 Electron 应用的拖拽 *** 作。
本节将通过一个简单的案例演示如何实现图像文件的拖放 *** 作，本例的主要功能是将一个图像文件拖拽的程序的某个区域，然后在窗口上按等比例显示图像。
下面先看一下本例的效果，首先运行程序，然后找到一燃贺个图像文件，将其拖动到窗口上的红色背景区域，如下图所示。
*** 作系统原生的窗口样式中规中矩，看久了却难免会有些厌烦。所以在使用 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, 因此当您右键单击它时, 系统菜单将d出。 要使上下文菜单在所有平台上都正确运行, 您永远也不要在可拖拽区域上使用自定义上下文菜单。
不仅右键菜单，设置了这个样式的元素几乎无法响应所有的鼠标事件，包括点击、拖拽等。如果需要拖拽整个窗口，就相当尴尬了。
最近刚开始上手electron，就遇到了各种问题。在此作者记录一下，有需要的朋友也可以来看一看，看是否能解决你自己的问题。雹李
这是electron的官网，小伙伴们想学习的可以去看一看
https://www.electronjs.org
从官网上荡下来的项目是有边框的，就跟浏览器一样，我们可以检查。
但是如何去掉边框呢。我上网查了查
接下来就是解决自定义最大化等问题了
这是我从网上找到的比较靠谱的博主的文章了，给大家分享一下
https://www.cnblogs.com/mica/p/10794751.html
总结起来就是要新添加（main.js）
新添加（renderer.js）
新添加（index.html）
但是遇到了 一个问题 （require不识别）
上网找了很多方法，都说要加一个nodeIntegration: true,就可以解决问题
可是我的问题没有得到解决，可能我用的是最新版的缘故把
这是我千辛万苦找到的一个能解决问题的博主的文章
https://blog.csdn.net/adley_app/article/details/118143784
试了试会报一个mainWindow找不到的错误，
仔细看了下原因，是因为是const
于是 我改变了他的数据类型用 var
后面又遇到了一个问题 就是 同时打开了 两个页面
（我先开始还纳闷为什么放大最小化都能生效，为什么关闭不生效呢）
后面我把下面的东西给注了，成功了
关于可拖拽，我也是查了查。最简单的就是给你所想要拖拽的最外层盒子加一个这样的属性
我起初加在了行内样式，也就是这样，发现不起作用。
于是我就找问题
发现只能加在css中，
于是我就改成了这样
发现可用，并且需要将其中需要点击的东西标记为不可拖拽，否则用户将无法点击他们
下面给大慎肆渗家发一个完整的css(style.css),我里面也就button能点击
最后 给大家发一个完整版的（main,js）
以上就是设置Electron无边框窗口（自定义最小化、最大化、关闭、可拖拽）的方法了
如果这篇文章对你有帮助，或者在进行宽脊中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）