electron 创建圆角窗口附带阴影效果

窗口属性的设置

win = new BrowserWindow({
        width: 520,
        height: 320,
        transparent: true,
        backgroundColor: '#00000000',
        frame: false,
        resizable: false
})

因为electron创建的主窗口既不能倒圆角，也无法添加阴影，我曾经想从这里突破，查看BrowserWindow属性文档后发现没有这些属性。所以要想有圆角，BrowserWindow的主窗口就必须消失，设置transparent: true，即主窗口透明，不让它碍事。backgroundColor: '#00000000',背景色也需要透明。然后frame: false，先得无边框才能有圆角。这两项是必须的，圆角只能通过操作CSS才能得到。

vue页面如下

<template>
  <div class="shadow">
    <div id="win">这是自定义窗口和添加阴影特效div>
  div>
template>
 
<script>
export default {};
script>
 
<style lang="scss" scoped>
.shadow {
  body {
    background-color: rgba(0, 0, 0, 0);
  }
  #win {
    width: 500px;
    height: 300px;
    text-align: center;
    background-color: #1fa431;
    border-radius: 30px;
    box-shadow: 8px 8px 10px grey;
    -webkit-app-region: drag;
  }
}
style>

background.js

'use strict'
 
import { app, protocol, BrowserWindow } from 'electron'
 
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])
 
 
//系统托盘
const path = require('path')
//打开新窗口的路径
const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:8080` : `file://${__dirname}/index.html`
 
async function createWindow() {
    const win = new BrowserWindow({
        width: 520,
        height: 320,
        transparent: true,
        backgroundColor: '#00000000',
        frame: false,
        resizable: false,
        icon: path.join(__static, "./static/logo.ico"),
        webPreferences: {
            devTools: true,//关闭开发者工具
            nodeIntegration: true,//开启node模块
            enableRemoteModule: true, // 使用remote模块     electron12版本之后废除了,需要自己安装
            contextIsolation: false,
            //解决axios跨域请求      不推荐，不安全，但简单好用
            webSecurity: false,
        },
    })
    win.loadURL(winURL + "#/shadow");
 
    win.once('ready-to-show', () => {
      // 初始化后再显示
      win.show()
    })
 
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    // await win3.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/chat_index')
    // await win2.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '#/test')
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}
 
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
 
app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
 
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.once('ready-to-show', () => {
  win.show();
})
 
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})
 
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

效果图

添加内容之后的效果图