相关依赖
里面使用了vuex vue vue-route storejs
storejs 用来持久化vuex状态
展示
介绍说明
没有使用electron内置的-webkit-app-region: drag 因为使用他那个有很多问题
比如事件无法使用 右键无法使用 以及不能使用手型等!
安装
安装的时候没有截图 所以就参考下其他的文章吧
storejs 安装
npm install storejs
准备写代码
配置路由文件
export default new router({ routes: [ {path: '/', name: 'home', component: ()=> import('@/view//home')}, {path: '/suspension', name: 'suspension', component: ()=> import('@/view/components/suspension')} ]})
写悬浮窗页面
页面路径 /src/renderer/view/components/suspension.vue
<template> <div id="suspension"> <div class="logo"></div> <div class="content_body"> <div class="upload">拖拽上传</div> </div> </div></template><script> export default { name: suspension, mounted() { let win = this.$electron.remote.getcurrentwindow(); let biasx = 0; let biasy = 0; let that = this; document.addeventlistener('mousedown', function (e) { switch (e.button) { case 0: biasx = e.x; biasy = e.y; document.addeventlistener('mousemove', moveevent); break; case 2: that.$electron.ipcrenderer.send('createsuspensionmenu'); break; } }); document.addeventlistener('mouseup', function () { biasx = 0; biasy = 0; document.removeeventlistener('mousemove', moveevent) }); function moveevent(e) { win.setposition(e.screenx - biasx, e.screeny - biasy) } } }</script><style> * { padding: 0; margin: 0; } .upload { height: 25px; line-height: 25px; font-size: 12px; text-align: center; color: #74a1fa; } .logo { width: 40px; background: #5b9bfe url(../../assets/img/logo@2x.png) no-repeat 2px 3px; background-size: 80%; } .content_body { background-color: #eef4fe; width: 100%; } #suspension { -webkit-user-select: none; cursor: pointer; overflow: hidden; } #suspension { cursor: pointer !important; height: 25px; border-radius: 4px; display: flex; border: 1px solid #3388fe; }</style>
主进程创建悬浮窗页面代码
路径: /src/main/window.js
import {browserwindow, ipcmain, screen, menu, shell, app, webcontents} from 'electron'var win = null;const window = browserwindow.fromwebcontents(webcontents.getfocusedwebcontents());const winurl = process.env.node_env === 'development' ? `http://localhost:9080/#/suspension` : `file://${__dirname}/index.html/#/suspension`;ipcmain.on('showsuspensionwindow', () => { if (win) { if (win.isvisible()) { createsuspensionwindow(); } else { win.showinactive(); } } else { createsuspensionwindow(); }});ipcmain.on('createsuspensionmenu', (e) => { const rightm = menu.buildfromtemplate([ {label: '开始全部任务', enabled: false}, {label: '暂停全部任务', enabled: false}, {label: '本次传输完自动关机'}, {type: 'separator'}, { label: '隐藏悬浮窗', click: () => { window.webcontents.send('hidesuspension', false); win.hide() } }, {type: 'separator'}, { label: '加入qq群', click: () => { shell.openexternal('tencent://groupwpa/?subcmd=all¶m=7b2267726f757055696e223a3831343237303636392c2274696d655374616d70223a313533393531303138387d0a'); } }, { label: 'github地址', click: () => { shell.openexternal('https://github.com/lihaotian0607/auth'); } }, { label: '退出软件', click: () => { app.quit(); } }, ]); rightm.popup({});});function createsuspensionwindow() { win = new browserwindow({ width: 107, //悬浮窗口的宽度 比实际p的宽度要多2px 因为有1px的边框 height: 27, //悬浮窗口的高度 比实际p的高度要多2px 因为有1px的边框 type: 'toolbar', //创建的窗口类型为工具栏窗口 frame: false, //要创建无边框窗口 resizable: false, //禁止窗口大小缩放 show: false, //先不让窗口显示 webpreferences: { devtools: false //关闭调试工具 }, transparent: true, //设置透明 alwaysontop: true, //窗口是否总是显示在其他窗口之前 }); const size = screen.getprimarydisplay().workareasize; //获取显示器的宽高 const winsize = win.getsize(); //获取窗口宽高 //设置窗口的位置 注意x轴要桌面的宽度 - 窗口的宽度 win.setposition(size.width - winsize[0], 100); win.loadurl(winurl); win.once('ready-to-show', () => { win.show() }); win.on('close', () => { win = null; })}ipcmain.on('hidesuspensionwindow', () => { if (win) { win.hide(); }});
store文件
路径: /src/renderer/store/modules/suspension.js
import storejs from 'storejs'const state = { show: storejs.get('showsuspension')};const actions = { showsuspension: function ({state, commit}) { let status = true; storejs.set('showsuspension', status); state.show = status; }, hidesuspension: function ({state, commit}) { let status = false; storejs.set('showsuspension', status); state.show = status; },};export default ({ state, actions});
版权说明
里面使用的百度的图标以及ui作为学习使用,请不要作为商业用途!
遗留问题
在软件关闭之后重启会导致悬浮窗口的位置重置 也曾尝试在主进程中使用store.js 但是不能用!
如果想解决这个问题 可以在渲染进程中将拖动的最后坐标保存到storejs中
在渲染进程给主进程发送异步消息的时候将坐标携带进去 也可以使用nedb在主进程中存储坐标!
github地址
使用electron制作百度网盘客户端: https://github.com/lihaotian0...
使用electron制作百度网盘悬浮窗: https://github.com/lihaotian0...
以上就是使用electron怎么实现网盘的悬浮窗口？的详细内容。