首先看下效果圖如下：

image.png

當(dāng)前效果是在mac電腦顯示情況。

1、創(chuàng)建窗口的函數(shù)

import { app, protocol,BrowserWindow, ipcMain, Menu, Tray,screen } from 'electron'
// 創(chuàng)建窗口的函數(shù)
let win2 = null
async function createSBallWindow () {
  win2 = new BrowserWindow({
    width: 60, //懸浮窗口的寬度 比實際DIV的寬度要多2px 因為有1px的邊框
    height: 60, //懸浮窗口的高度 比實際DIV的高度要多2px 因為有1px的邊框
    type: 'toolbar',  //創(chuàng)建的窗口類型為工具欄窗口
    frame: false,  //要創(chuàng)建無邊框窗口
    resizable: false, //禁止窗口大小縮放
    show: false,  //先不讓窗口顯示
    webPreferences: {
      devTools: false //關(guān)閉調(diào)試工具
    },
    transparent: true, //設(shè)置透明
    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'),
    }
  })
  //通過獲取用戶屏幕的寬高來設(shè)置懸浮球的初始位置
  const { left, top } = { left: screen.getPrimaryDisplay().workAreaSize.width - 160, top: screen.getPrimaryDisplay().workAreaSize.height - 160 }
  win2.setPosition(left, top) //設(shè)置懸浮球位置
  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、調(diào)用窗口的函數(shù)

app.on('ready', async () => {
  //創(chuàng)建主窗口
  createWindow()
  //創(chuàng)建球形窗口
  createSBallWindow()
})

注意createSBallWindow創(chuàng)建窗口函數(shù)的show，設(shè)置的初始屬性是show:false,也就是默認不顯示，只有調(diào)用的時候才會顯示?？梢栽谥鞔翱陉P(guān)閉的時候調(diào)用win2.show()就可以讓小球顯示。

3、小球頁面

在路由里添加個ball.vue的小球頁面，訪問地址是http:localhost:8081/#/ball代碼。這里沒有對拖拽事件做處理，不同系統(tǒng)上可能會有問題，具體怎么處理，可以自己百度。如下：

<template>
  <div class="ballBox" @click="openWin">工具</div>
</template>

<script setup>
const { ipcRenderer} = window.require('electron')
const openWin = () => {
  //渲染進程想主進程發(fā)送消息，點擊打開主頁面
  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>

在當(dāng)前頁面可以處理小球的其它功能，比如消息提示，右鍵操作功能。

4. 其它問題

1、細心的朋友可能注意到了，效果圖的浮動小球樣式有問題，上面有一個細線（mac系統(tǒng)上），這是蘋果系統(tǒng)bug，暫時還沒解決辦法。