相关依赖

里面使用了vuex vue vue-路线商店

storeJs用来持久化状态管理状态

展示

介绍说明

没有使用电子内置的-webkit-app-region:拖动因为使用他那个有很多问题

比如事件无法使用右键无法使用以及不能使用手型等！

安装

安装的时候没有截图所以就参考下我其他的文章吧

storeJs安装

新公共管理安装商店准备写代码

配置路由文件

导出默认的新路由器({ routes: [ {path: '/'，名称： '家庭'，组件： ()=导入(' @/view///home ')}，{path: '/suspension '，名称： '暂停'，组件： ()=导入(' @/视图/组件/悬架')})})写悬浮窗页面

页面路径/src/渲染器/视图/组件/悬架。某视频剪辑软件

模板div id=' suspension ' div class=' logo '/div class=' content _ body ' div class='上传'拖拽上传/div/div/div/模板脚本导出默认值{ name: 'suspension '，mounted() { let win=this .$电子。远程。getcurrentwindow()；设biasX=0；设biasY=0；让那个=这个；文件。addeventlistener('鼠标向下'，函数(e){开关(e .按钮){ case 0: biasX=e . x；biasY=e.ydocument。addeventlistener(' mousemove '，moveEvent)；打破；案例2:$电子。ipcrenderer。发送(“create suspension menu”)；打破；} });文件。addeventlistener('鼠标向上'，function(){ biasX=0；biasY=0；文件。removeeventlistener(' mousemove '，moveEvent)})；函数moveEvent(e){ win。设置位置(e . screenx-biasX，e . screeny-biasY)} }/脚本样式* { padd : 0；保证金： 0；} .上传{高： 25px线高： 25pxfont-size : 12px文本对齐：中心；color: # 74A1FA}。徽标{ width: 40px背景： #5B9BFE url('././assets/img/[email protected]')no-repeat 2px 3px；背景尺寸： 80%;} .content _ body {底色： # EEF4FE宽度： 100%;} #悬挂{-网络套件-用户-选择：无；光标：指针；飞越：隐藏；} #暂停cursor:指针！重要；高度： 25px边界半径： 4pxdisplay: flexborder: 1px固体# 3388FE}/样式主进程创建悬浮窗页面代码

路径： /src/main/window.js

从电子' var win=null导入{浏览器窗口、ipcMain、屏幕、菜单、外壳、应用程序、网络内容}；常量窗口=浏览器窗口。来自webcontents(webcontents。getfocususewebcontents())；const WinURl=进程。ENV。NODE _ ENV=='开发'？` http://localhost :9080/#/suspension ` : ` file :/$ { _ _ dirname }/index。html/#/悬浮`；ipcmain。on(' showSuspensionWindow '，()={ if(win){ if(win。is visible()){ createssuspension window()；} else { win。show inactive()；} } else {创建挂起窗口()；}});ipcmain。on(' create suspension menu '，(e)={ const rightM=menu。buildfromtemplate([{ label : '开始全部任务，enabled: false}，{label: '暂停全部任务，enabled: false}，{label: '本次传输完自动关机}，{type: '分隔符}，{ label: '隐藏悬浮窗，单击：()={ window。网络内容。send(' hideshold '，false)；win.hide() } }，{type: '分隔符}，{ label: '加入即时通信软件群，点击：()={ shell。openexternal('腾讯：//集团wpa/？subcmd=all param=7b 2267726 f 757055696 e 223 a 3831343237303636392 c 2274696d 655374616d 70223 a 31353393531303138387 d0a '；} }，{ label: 'GitHub地址，点击：()={ shell。openexternal(' https://github。com/田0607/auth’；} }，{ label: '退出软件，点击：()={ app。退出()；} }, ]);好的。popup({ })；});函数createssuspension window(){ win=新浏览器窗口({ width :107//悬浮窗口的宽度比实际差异的宽度要多2px因为有1px的边框高度： 27,//悬浮窗口的高度比实际差异的高度要多2px因为有1px的边框键入："工具栏",//创建的窗口类型为工具栏窗口frame: false，//要创建无边框窗口resizable: false，//禁止窗口大小缩放show: false，//先不让窗口显示web preferences 3360 { dev tools : false//关闭调试工具},透明： true，//设置透明alwaysOnTop: true，//窗口是否总是显示在其他窗口之前});const size=屏幕。getprimarydisplay().工作狂；//获取显示器的宽高const WinSize=win。getSize()；//获取窗口宽高//设置窗口的位置注意x轴要桌面的宽度-窗口的宽度赢了。设定位置(尺寸。width-winSize[0]，100)；赢了。load URl(WinURl)；' win.once('准备展示，()={ win。show()})；win.on('close '，()={ win=null})} ipcmain。on('隐藏悬挂窗'，()={ if(win){ win。hide()；}});商店文件

路径：/src/渲染器/商店/模块/悬架。射流研究…

从“storejs”常量状态={ show : storejs。get('显示暂停')}导入storejsconst actions={ show suspension : function({ state，commit }){ let status=true；storejs.set('showSuspension '，状态);state.show=status}，hideSuspension:函数({state，commit }){ let status=false；storejs.set('showSuspension '，状态);state.show=status}，}；导出默认值({状态，操作})；遗留问题

在软件关闭之后重启会导致悬浮窗口的位置重置也曾尝试在主进程中使用store.js但是不能用！如果想解决这个问题可以在渲染进程中将拖动的最后坐标保存到storejs中在渲染进程给主进程发送异步消息的时候将坐标携带进去也可以使用非电解质体系汽在主进程中存储坐标！开源代码库地址

使用电子制作百度网盘客户端： https://github.com/lihaotian0607/baidupan使用电子制作百度网盘悬浮窗： https://github.com/lihaotian0607/electron-suspension

目前这个开源代码中没有悬浮窗有时间了会加上去！