首先看下效果图如下：
image.png
当前效果是在mac电脑显示情况。
1、创建窗口的函数
import { app, protocol,BrowserWindow, ipcMain, Menu, Tray,screen } from 'electron'
// 创建窗口的函数
let win2 = null
async function createSBallWindow () {
win2 = new BrowserWindow({
width: 60, //悬浮窗口的宽度 比实际DIV的宽度要多2px 因为有1px的边框
height: 60, //悬浮窗口的高度 比实际DIV的高度要多2px 因为有1px的边框
type: 'toolbar', //创建的窗口类型为工具栏窗口
frame: false, //要创建无边框窗口
resizable: false, //禁止窗口大小缩放
show: false, //先不让窗口显示
webPreferences: {
devTools: false //关闭调试工具
},
transparent: true, //设置透明
hasShadow:false, //不显示阴影
alwaysOnTop: true, //窗口是否总是显示在其他窗口之前\
// backgroundColor: '#eee',
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
// preload: path.join(__dirname, 'preload.js'),
}
})
//通过获取用户屏幕的宽高来设置悬浮球的初始位置
const { left, top } = { left: screen.getPrimaryDisplay().workAreaSize.width - 160, top: screen.getPrimaryDisplay().workAreaSize.height - 160 }
win2.setPosition(left, top) //设置悬浮球位置
if (process.env.WEBPACK_DEV_SERVER_URL) {
await win2.loadURL(`${process.env.WEBPACK_DEV_SERVER_URL}#/ball`)
}else{
await win2.loadURL('app://./index.html#/ball')
}
win2.once('ready-to-show', () => {
win2.show()
})
win2.on('close', () => {
win2 = null
})
}
2、调用窗口的函数
app.on('ready', async () => {
//创建主窗口
createWindow()
//创建球形窗口
createSBallWindow()
})
注意createSBallWindow创建窗口函数的show，设置的初始属性是show:false,也就是默认不显示，只有调用的时候才会显示。可以在主窗口关闭的时候调用win2.show()就可以让小球显示。
3、小球页面
在路由里添加个ball.vue的小球页面，访问地址是http:localhost:8081/#/ball代码。这里没有对拖拽事件做处理，不同系统上可能会有问题，具体怎么处理，可以自己百度。如下：
<template>
<div class="ballBox" @click="openWin">工具</div>
</template>
<script setup>
const { ipcRenderer} = window.require('electron')
const openWin = () => {
//渲染进程想主进程发送消息，点击打开主页面
ipcRenderer.send('openWin', true)
}
</script>
<style lang="scss" scoped >
.ballBox {
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
box-sizing: border-box;
background: #eee;
border: 1px solid #eee;
text-align: center;
cursor: pointer;
font-size: 14px;
}
</style>
在当前页面可以处理小球的其它功能，比如消息提示，右键操作功能。
4. 其它问题
1、细心的朋友可能注意到了，效果图的浮动小球样式有问题，上面有一个细线（mac系统上），这是苹果系统bug，暂时还没解决办法。
