帝王谷资源网 Design By www.wdxyy.com
相关依赖
里面使用了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' "htmlcode">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 });遗留问题
- 在软件关闭之后重启会导致悬浮窗口的位置重置 也曾尝试在主进程中使用store.js 但是不能用!
- 如果想解决这个问题 可以在渲染进程中将拖动的最后坐标保存到storejs中
- 在渲染进程给主进程发送异步消息的时候将坐标携带进去 也可以使用nedb在主进程中存储坐标!
github地址
使用electron制作百度网盘客户端: https://github.com/lihaotian0607/baidupan
使用electron制作百度网盘悬浮窗: https://github.com/lihaotian0607/electron-suspension
目前这个开源代码中没有悬浮窗 有时间了会加上去!!!
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月25日
2024年10月25日
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]